Add Lighting component and integrate with navigation and routing

- Introduced Lighting component
- Updated AppLayout to include Lighting in the child components.
- Added Lighting route to navigation with authentication requirement.

src/components/AudioPlayer.jsx

@@ -613,7 +613,7 @@ export default function Player({ user }) {
 
   const handleRemoveFromQueue = async (uuid) => {
     try {
-      const response = await authFetch(`${API_URL}/radio/remove_from_queue`, {
+      const response = await authFetch(`${API_URL}/radio/queue_remove`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -637,12 +637,13 @@ export default function Player({ user }) {
   const [queueSearch, setQueueSearch] = useState("");
   const fetchQueue = async (page = queuePage, rows = queueRows, search = queueSearch) => {
     const start = page * rows;
+    console.log("Fetching queue for station (ref):", activeStationRef.current);
     try {
       const response = await authFetch(`${API_URL}/radio/get_queue`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          station: activeStation,
+          station: activeStationRef.current, // Use ref to ensure latest value
           start,
           length: rows,
           search,
@@ -650,7 +651,6 @@ export default function Player({ user }) {
       });
       const data = await response.json();
       setQueueData(data.items || []);
-      // Use recordsFiltered for search, otherwise recordsTotal
       setQueueTotalRecords(
         typeof search === 'string' && search.length > 0
           ? data.recordsFiltered ?? data.recordsTotal ?? 0
@@ -663,9 +663,24 @@ export default function Player({ user }) {
 
   useEffect(() => {
     if (isQueueVisible) {
+      console.log("Fetching queue for station:", activeStation);
       fetchQueue(queuePage, queueRows, queueSearch);
     }
-  }, [isQueueVisible, queuePage, queueRows, queueSearch]);
+  }, [isQueueVisible, queuePage, queueRows, queueSearch, activeStation]);
+
+  useEffect(() => {
+    console.log("Active station changed to:", activeStation);
+    if (isQueueVisible) {
+      fetchQueue(queuePage, queueRows, queueSearch);
+    }
+  }, [activeStation]);
+
+  useEffect(() => {
+    if (isQueueVisible) {
+      console.log("Track changed, refreshing queue for station:", activeStation);
+      fetchQueue(queuePage, queueRows, queueSearch);
+    }
+  }, [currentTrackUuid]);
 
   // Always define queueFooter, fallback to Close button if user is not available
   const isDJ = (user && user.roles.includes('dj')) || ENVIRONMENT === "Dev";