feat: show/hide optional controls

Author: kungfux

src/App.tsx

@@ -6,27 +6,32 @@ import TimerCountdown from "./pages/TimerCountdown.page";
 import Footer from "./components/Footer.component";
 import { MuteButton } from "./components/MuteButton.component";
 import { MuteProvider } from "./contexts/Mute.context";
+import { HideProvider } from "./contexts/Hide.context";
+import { HideButton } from "./components/HideButton.component";
 
 function App() {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const timeParam = queryParams.get("time");
 
   return (
-    <MuteProvider>
-      <div className="flex flex-col items-center justify-between min-h-screen h-screen min-w-96">
-        <div className="flex justify-end w-full p-4">
-          <MuteButton />
+    <HideProvider>
+      <MuteProvider>
+        <div className="flex flex-col items-center justify-between min-h-screen h-screen min-w-96">
+          <div className="flex justify-end w-full p-4">
+            <HideButton />
+            <MuteButton />
+          </div>
+          <Routes>
+            <Route
+              path={routes.root.path}
+              element={timeParam ? <TimerCountdown /> : <TimerSetup />}
+            />
+          </Routes>
+          <Footer />
         </div>
-        <Routes>
-          <Route
-            path={routes.root.path}
-            element={timeParam ? <TimerCountdown /> : <TimerSetup />}
-          />
-        </Routes>
-        <Footer />
-      </div>
-    </MuteProvider>
+      </MuteProvider>
+    </HideProvider>
   );
 }
 

src/components/BitButton.component.tsx

@@ -1,7 +1,5 @@
 import { forwardRef, useImperativeHandle, useState } from "react";
-
 import NumberFlow from "@number-flow/react";
-
 import "@fontsource/montserrat/400.css";
 import styles from "./BitButton.module.css";
 

src/components/Button.component.tsx

@@ -1,6 +1,6 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import styles from "./Button.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import styles from "./Button.module.css";
 
 const Button = ({
   type,

src/components/EditableTitle.component.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { faPenToSquare, faSquareCheck, faSquareXmark } from "@fortawesome/free-solid-svg-icons";
 import { IconButton } from "./IconButton.component";
-
 import styles from "./EditableTitle.component.module.css";
-import { faPenToSquare, faSquareCheck, faSquareXmark } from "@fortawesome/free-solid-svg-icons";
 
 const EditableTitle = () => {
   const countdownTitleSettingKey = "title";

src/components/HideButton.component.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { useHideContext } from "../hooks/useHideContext.hook";
+import { IconButton } from "./IconButton.component";
+
+const HideButton = () => {
+  const IsHiddenSettingKey = "hide";
+  const { isHidden, toggleHide } = useHideContext();
+
+  useEffect(() => {
+    const isHiddenSettingValue = localStorage.getItem(IsHiddenSettingKey);
+    if (isHiddenSettingValue && isHiddenSettingValue !== isHidden.toString()) {
+      toggleHide();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem(IsHiddenSettingKey, isHidden.toString());
+  }, [isHidden]);
+
+  return (
+    <IconButton
+      icon={isHidden ? faEyeSlash : faEye}
+      tooltip={isHidden ? "Show optional controls" : "Hide optional controls"}
+      onClick={() => toggleHide()}
+    />
+  );
+};
+
+export { HideButton };

src/components/IconButton.component.tsx

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import styles from "./IconButton.component.module.css";
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import styles from "./IconButton.component.module.css";
 
 const IconButton = ({
   icon,

src/components/MuteButton.component.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
+import { faVolumeHigh, faVolumeXmark } from "@fortawesome/free-solid-svg-icons";
 import { useMuteContext } from "../hooks/useMuteContext.hook";
 import { IconButton } from "./IconButton.component";
-import { faVolumeHigh, faVolumeXmark } from "@fortawesome/free-solid-svg-icons";
 
 const MuteButton = () => {
   const IsMutedSettingKey = "mute";

src/contexts/Hide.context.tsx

@@ -0,0 +1,22 @@
+import { createContext, useState } from "react";
+
+const HideContext = createContext({
+  isHidden: false,
+  toggleHide: () => {},
+});
+
+const HideProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isHidden, setIsHidden] = useState(false);
+
+  const toggleHide = () => {
+    setIsHidden(!isHidden);
+  };
+
+  return (
+    <HideContext.Provider value={{ isHidden, toggleHide }}>
+      {children}
+    </HideContext.Provider>
+  );
+};
+
+export { HideContext, HideProvider };

src/hooks/useHideContext.hook.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { HideContext } from "../contexts/Hide.context";
+
+const useHideContext = () => {
+  const context = useContext(HideContext);
+  if (!context) {
+    throw new Error("useHideContext must be used within a MuteProvider");
+  }
+  return context;
+};
+
+export { useHideContext };

src/pages/TimerCountdown.page.tsx

@@ -8,12 +8,14 @@ import BitCounter from "../BitCounter";
 import EditableTitle from "../components/EditableTitle.component";
 import { Button, ButtonType } from "../components/Button.component";
 import { useMuteContext } from "../hooks/useMuteContext.hook";
+import { useHideContext } from "../hooks/useHideContext.hook";
 import { faStop } from "@fortawesome/free-solid-svg-icons";
 
 function TimerCountdown() {
   const navigate = useNavigate();
   const location = useLocation();
   const { isMuted } = useMuteContext();
+  const { isHidden } = useHideContext();
   const queryParams = new URLSearchParams(location.search);
   const timeParam = queryParams.get("time");
 
@@ -145,10 +147,14 @@ function TimerCountdown() {
             timeLeft <= 0 ? "pointer-events-none opacity-50" : ""
           }`}
         >
-          <p className="mb-4">Add time:</p>
-          <div className="flex flex-row justify-center align-center flex-wrap">
-            {addTimeButtons}
-          </div>
+          {!isHidden && (
+            <>
+              <p className="mb-4">Add time:</p>
+              <div className="flex flex-row justify-center align-center flex-wrap">
+                {addTimeButtons}
+              </div>
+            </>
+          )}
         </div>
       </div>
     </>