Enhance authentication flow with improved error handling and logging in requireAuthHook. Refine HLS stream initialization and metadata fetching in AudioPlayer to handle station changes gracefully. Improve toast notifications and autocomplete behavior in LyricSearch. Simplify RandomMsg logic and remove unused imports. Add track and album count display in MediaRequestForm and enhance artist selection. Introduce dark mode styles for tables and dialogs in RequestManagement.css. Adjust imports and ensure proper usage of requireAuthHook in index.astro and requests.astro.

src/components/RandomMsg.jsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 import { API_URL } from "../config";
-import ReplayIcon from "@mui/icons-material/Replay";
 
 export default function RandomMsg() {
   const [randomMsg, setRandomMsg] = useState("");
@@ -9,24 +8,17 @@ export default function RandomMsg() {
     try {
       const response = await fetch(`${API_URL}/randmsg`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json; charset=utf-8",
-        },
+        headers: { "Content-Type": "application/json; charset=utf-8" },
       });
-
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
       const data = await response.json();
-      if (data?.msg) {
-        const formattedMsg = data.msg.replace(/<br\s*\/?>/gi, "\n");
-        setRandomMsg(formattedMsg);
-      }
+      if (data?.msg) setRandomMsg(data.msg.replace(/<br\s*\/?>/gi, "\n"));
     } catch (err) {
       console.error("Failed to fetch random message:", err);
     }
   };
 
-  useEffect(() => {
-    getRandomMsg();
-  }, []);
+  useEffect(() => void getRandomMsg(), []);
 
   return (
     <div className="random-msg-container">
@@ -37,15 +29,43 @@ export default function RandomMsg() {
           </small>
         )}
       </div>
-      <button
-        id="new-msg"
-        aria-label="New footer message"
-        type="button"
-        className="flex items-center justify-center px-2 py-1 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-opacity new-msg-button"
-        onClick={getRandomMsg}
-      >
-        <ReplayIcon fontSize="small" />
-      </button>
+      {randomMsg && (
+        <button
+          aria-label="New footer message"
+          type="button"
+          className="flex items-center justify-center px-2 py-1 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-opacity new-msg-button"
+          onClick={getRandomMsg}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="16"
+            height="16"
+            aria-hidden="true"
+            focusable="false"
+            className="inline-block"
+          >
+            <path
+              d="M21 12a9 9 0 1 1-2.64-6.36"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <polyline
+              points="21 3 21 9 15 9"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+
+        </button>
+      )}
+
     </div>
   );
 }