refactor: NPED Context, sound update and start session

src/components/UI/Header.tsx

@@ -11,6 +11,7 @@ import {
 import type { VersionFieldType } from "../../types/types";
 import { useEffect, useState } from "react";
 import SoundBtn from "./SoundBtn";
+import { useNPEDContext } from "../../context/NPEDUserContext";
 
 async function fetchVersions(
   signal?: AbortSignal
@@ -43,6 +44,7 @@ export default function Header() {
   const [offsetMs, setOffsetMs] = useState<number | null>(null);
   const [nowMs, setNowMs] = useState<number>(Date.now());
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const { sessionStarted } = useNPEDContext();
 
   const toggleFullscreen = () => {
     if (!document.fullscreenElement) {
@@ -98,6 +100,9 @@ export default function Header() {
         </Link>
       </div>
       <div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
+        {sessionStarted && (
+          <div className="text-green-400 font-bold">Session Active</div>
+        )}
         <div className="flex flex-col leading-tight text-white tabular-nums text-xl text-right mx-auto md:mx-10 space-y-1 my-2">
           <h2>Local: {localStr}</h2>
           <h2>UTC: {utcStr}</h2>

src/components/UI/NavigationArrow.tsx

@@ -3,14 +3,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "react-router";
 
 type NavigationArrowProps = {
-  side: string;
+  side: string | undefined;
   settingsPage?: boolean;
 };
 
 const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   const navigate = useNavigate();
 
-  const navigationDest = (side: string) => {
+  const navigationDest = (side: string | undefined) => {
     if (settingsPage) {
       navigate("/");
       return;