app/components/station-player.tsx

@@ -46,7 +46,7 @@ export function StationPlayer({ station, nextPrevStationIds }: StationPlayerProp
             }
         };
         importComponent()
-    }, [station])
+    }, [station, nextPrevStationIds, route])
   
     if (!station || !player) {
         return <></>;

app/components/stations-gallery.tsx

@@ -1,6 +1,6 @@
-import { PlayIcon } from "@heroicons/react/24/solid";
+import { PlayIcon, SpeakerWaveIcon } from "@heroicons/react/24/solid";
 import type { Tag } from "@prisma/client";
-import { Link } from "@remix-run/react";
+import { Link, useLocation } from "@remix-run/react";
 import { ListenLink } from "~/components/page-layout";
 import type { StationWithTagsClientSide } from "~/models/station.server";
 import { getStationUrl, type ConvertDatesToStrings } from "~/utils";
@@ -11,6 +11,8 @@ export type StationsGalleryProps = {
 };
 
 export function StationsGallery({ stations, tag }: StationsGalleryProps) {
+    const location = useLocation();
+    const currentStationId = new URLSearchParams(location.search).get('station')?.trim()
     return (
         <div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-4">
             {stations.map((station) => {
@@ -18,9 +20,14 @@ export function StationsGallery({ stations, tag }: StationsGalleryProps) {
                     <div key={station.id} className="card card-compact bg-base-100 shadow-xl mb-[70px]">
                         <figure><img src={station.imgUrl} alt="Radio Station" /></figure>
                         <div className="card-body">
-                            <h2 className="card-title">
-                                {station.name}
-                            </h2>
+                            <div className="flex items-center justify-start gap-2">
+                                <h2 className="card-title">
+                                    {station.name}
+                                </h2>
+                                {station.id === currentStationId ? <div className="w-4 h-4">
+                                    <SpeakerWaveIcon />
+                                </div> : null}
+                            </div>
                             <h2 className="flex gap-1">
                                 {station.tags.map((t, id) => {
                                     return <ListenLink key={id} to={`/listen/tag/${t.tag.slug}`}

app/routes/listen.tsx

@@ -22,7 +22,6 @@ export async function loader({ request }: LoaderArgs) {
 export default function ListenLayout() {
     const { tags, user, station, prevNextStationIds } = useLoaderData<typeof loader>();
 
-    console.log(prevNextStationIds)
     return (
         <PageLayout tags={tags} user={user} station={station}>
             <Outlet />