- UI

- Moved PageLayout to /listen routes
  - Enabled persistent player across navgiation

app/components/page-layout.tsx

@@ -1,21 +1,52 @@
 import { RadioIcon } from "@heroicons/react/24/solid";
-import { NavLink } from "@remix-run/react";
+import { Link, NavLink } from "@remix-run/react";
+import type { RemixLinkProps } from "@remix-run/react/dist/components";
+import { RemixNavLinkProps } from "@remix-run/react/dist/components";
 import type { ReactNode } from "react";
+import * as React from "react";
+import { createContext, useContext } from "react";
+import type { StationWithTagsClientSide } from "~/models/station.server";
 import type { TagWithStationsClientSide } from "~/models/tag.server";
 import type { UserWithFavoriteStationsClientSide } from "~/models/user.server";
 
 export type PageLayoutProps = {
     children: ReactNode;
     tags: TagWithStationsClientSide[];
-    user?: UserWithFavoriteStationsClientSide
+    user?: UserWithFavoriteStationsClientSide;
+    station: StationWithTagsClientSide | null;
 }
 
-export function PageLayout({ children, tags, user }: PageLayoutProps) {
+export type StationContextType = {
+    station: StationWithTagsClientSide | null
+}
+
+const StationContext = createContext<StationContextType>({ station: null });
+
+export function useStationContext() {
+    return useContext(StationContext);
+}
+
+
+export function ListenLink(props: RemixLinkProps & React.RefAttributes<HTMLAnchorElement>) {
+    const { station } = useStationContext();
+    const url = props.to + (station ? `?station=${station.id}` : "");
+    return <Link {...props} to={url}>{props.children}</Link>;
+}
+
+export function ListenNavLink(props: RemixNavLinkProps & React.RefAttributes<HTMLAnchorElement>) {
+    const { station } = useStationContext();
+    const url = props.to + (station ? `?station=${station.id}` : "");
+    return <NavLink {...props} to={url}>{props.children}</NavLink>;
+}
+
+export function PageLayout({ children, tags, user, station }: PageLayoutProps) {
+
     return (
+        <StationContext.Provider value={{ station }}>
             <div className="drawer drawer-mobile">
                 <input id="primary-drawer" type="checkbox" className="drawer-toggle" />
                 <div className="drawer-content flex flex-col">
-                <div className="w-full navbar bg-base-300">
+                    <div className="w-full navbar bg-base-300 lg:justify-end">
                         <div className="flex-none lg:hidden">
                             <label htmlFor="primary-drawer" className="btn btn-square btn-ghost">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -29,7 +60,24 @@ export function PageLayout({ children, tags, user }: PageLayoutProps) {
                             <RadioIcon className="h-8 w-8 p-0" />
                             <h1 className="text-2xl p-0">Awesome Radio</h1>
                         </div>
-                    <div className="flex-none hidden lg:block">
+                        <div className="flex-none">
+                            {user ?
+                                <div className="dropdown dropdown-end">
+                                    <label tabIndex={0} className="btn btn-ghost btn-circle avatar placeholder">
+                                        <div className="bg-neutral-focus text-neutral-content rounded-full w-12">
+                                            <span>LB</span>
+                                        </div>
+                                    </label>
+                                    <ul tabIndex={0}
+                                        className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
+                                        <li>
+                                            <Link to="/logout">Logout</Link>
+                                        </li>
+                                    </ul>
+                                </div> :
+                                <Link to="/join" className="btn">Join</Link>
+                            }
+
                         </div>
                     </div>
                     <div className="py-2 px-6">
@@ -47,7 +95,7 @@ export function PageLayout({ children, tags, user }: PageLayoutProps) {
                             <span>Listen</span>
                         </li>
                         <li>
-                        <NavLink to="/listen/home">Home</NavLink>
+                            <ListenNavLink to="/listen" end>Home</ListenNavLink>
                         </li>
                         <li className="menu-title">
                             <span>Tags</span>
@@ -57,10 +105,10 @@ export function PageLayout({ children, tags, user }: PageLayoutProps) {
                             .map((tag) => {
                                 return (
                                     <li key={tag.slug}>
-                                    <NavLink to={`/listen/tag/${tag.slug}`} className="capitalize">
+                                        <ListenNavLink to={`/listen/tag/${tag.slug}`} className="capitalize">
                                             {tag.name}
                                             <span className="badge badge-outline">{tag.stations?.length ?? 0}</span>
-                                    </NavLink>
+                                        </ListenNavLink>
                                     </li>
                                 );
                             })}
@@ -75,5 +123,6 @@ export function PageLayout({ children, tags, user }: PageLayoutProps) {
 
                 </div>
             </div>
+        </StationContext.Provider>
     );
 }

app/components/station-player.tsx

@@ -1,10 +1,13 @@
 import type { StationWithTagsClientSide } from "~/models/station.server";
 
 export type StationPlayerProps = {
-    station: StationWithTagsClientSide
+    station: StationWithTagsClientSide | null
 };
 
 export function StationPlayer({ station }: StationPlayerProps) {
+    if (!station) {
+        return <></>;
+    }
     return (
         <div
             className="fixed bottom-0 left-0 w-full h-[70px] px-4 py-2 z-50 flex justify-end content-center items-center gap-2"

app/components/stations-gallery.tsx

@@ -1,6 +1,7 @@
 import { PlayIcon } from "@heroicons/react/24/solid";
 import type { Tag } from "@prisma/client";
 import { Link } from "@remix-run/react";
+import { ListenLink } from "~/components/page-layout";
 import type { StationWithTagsClientSide } from "~/models/station.server";
 import type { Channel } from "~/routes/listen.channel.$channel";
 import type { ConvertDatesToStrings } from "~/utils";
@@ -15,12 +16,12 @@ export function StationsGallery({ stations, tag, channel }: StationsGalleryProps
 
     function getStationUrl(id: string): string {
         if (channel) {
-            return `/listen/channel/${channel.slug}/${id}`;
+            return `/listen/channel/${channel.slug}?station=${id}`;
         }
         if (tag) {
-            return `/listen/tag/${tag?.slug}/${id}`;
+            return `/listen/tag/${tag?.slug}?station=${id}`;
         }
-        return `/listen/home/${id}`;
+        return `/listen?station=${id}`;
     }
 
     return (
@@ -35,8 +36,8 @@ export function StationsGallery({ stations, tag, channel }: StationsGalleryProps
                             </h2>
                             <h2 className="flex gap-1">
                                 {station.tags.map((t, id) => {
-                                    return <Link key={id} to={`/listen/tag/${t.tag.slug}`}
-                                                 className="badge badge-secondary">{t.tag.name}</Link>;
+                                    return <ListenLink key={id} to={`/listen/tag/${t.tag.slug}`}
+                                                       className="badge badge-secondary">{t.tag.name}</ListenLink>;
                                 })}
                             </h2>
                             <p>{station.description}</p>

app/root.tsx

@@ -1,6 +1,5 @@
 import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction, LoaderArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { LinksFunction } from "@remix-run/node";
 import {
     isRouteErrorResponse,
     Links,
@@ -9,14 +8,9 @@ import {
     Outlet,
     Scripts,
     ScrollRestoration,
-    useLoaderData,
     useRouteError
 } from "@remix-run/react";
 import type { ReactNode } from "react";
-import { PageLayout } from "~/components/page-layout";
-import { getTags, TagWithStations } from "~/models/tag.server";
-
-import { getUser } from "~/session.server";
 import stylesheet from "~/tailwind.css";
 
 export const links: LinksFunction = () => [
@@ -24,12 +18,6 @@ export const links: LinksFunction = () => [
     ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : [])
 ];
 
-export async function loader({ request }: LoaderArgs) {
-    const tags: TagWithStations[] = await getTags();
-    const user = await getUser(request);
-    return json({ user, tags });
-};
-
 export type DocumentProps = {
     children: ReactNode;
     title?: string;
@@ -57,12 +45,9 @@ export function Document({ title, children }: DocumentProps) {
 }
 
 export default function App() {
-    const { tags, user } = useLoaderData<typeof loader>();
     return (
         <Document>
-            <PageLayout tags={tags} user={user}>
             <Outlet />
-            </PageLayout>
         </Document>
     );
 }

app/routes/_index.tsx

@@ -1,11 +1,8 @@
 import type { V2_MetaFunction } from "@remix-run/node";
 
-import { useOptionalUser } from "~/utils";
-
 export const meta: V2_MetaFunction = () => [{ title: "Awesome Radio" }];
 
 export default function Index() {
-    const user = useOptionalUser();
     return (
         <div className="hero bg-base-200">
             <div className="hero-content text-center">

app/routes/listen.channel.$channel.$station.tsx

@@ -1,27 +0,0 @@
-import type { LoaderArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
-import { StationPlayer } from "~/components/station-player";
-import { getStationById } from "~/models/station.server";
-import { notFound } from "~/utils";
-
-
-export async function loader({ params }: LoaderArgs) {
-    if (!params.station) {
-        throw notFound();
-    }
-
-    const station = await getStationById(params.station);
-    if (!station) {
-        throw notFound();
-    }
-    return json({ station });
-}
-
-export default function ListenChanelStation() {
-    const { station } = useLoaderData<typeof loader>();
-    return (
-        <StationPlayer station={station} />
-    );
-
-}

app/routes/listen.home.$station.tsx

@@ -1,4 +0,0 @@
-import ListenChanelStation from "~/routes/listen.channel.$channel.$station";
-
-export { loader } from "~/routes/listen.channel.$channel.$station";
-export default ListenChanelStation;

app/routes/listen.tag.$tag.$station.tsx

@@ -1,7 +0,0 @@
-import ListenChanelStation from "~/routes/listen.channel.$channel.$station";
-
-export { loader } from "~/routes/listen.channel.$channel.$station";
-export default ListenChanelStation;
-
-
-

app/routes/listen.tsx

@@ -1,8 +1,29 @@
-import { Outlet } from "@remix-run/react";
+import type { LoaderArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Outlet, useLoaderData } from "@remix-run/react";
+import { PageLayout } from "~/components/page-layout";
+import { StationPlayer } from "~/components/station-player";
+import type { StationWithTags } from "~/models/station.server";
+import { getStationById } from "~/models/station.server";
+import type { TagWithStations } from "~/models/tag.server";
+import { getTags } from "~/models/tag.server";
+import { getUser } from "~/session.server";
 
+export async function loader({ request }: LoaderArgs) {
+    const tags: TagWithStations[] = await getTags();
+    const user = await getUser(request);
+    const url = new URL(request.url);
+    const stationId = url.searchParams.get("station");
+    const station: StationWithTags | null = stationId ? await getStationById(stationId) : null;
+    return json({ user, tags, station });
+}
 
 export default function ListenLayout() {
+    const { tags, user, station } = useLoaderData<typeof loader>();
     return (
+        <PageLayout tags={tags} user={user} station={station}>
             <Outlet />
+            <StationPlayer station={station} />
+        </PageLayout>
     );
 }

app/routes/login.tsx

@@ -52,9 +52,9 @@ export const action = async ({ request }: ActionArgs) => {
 
     return createUserSession({
         redirectTo,
-    remember: remember === "on" ? true : false,
+        remember: remember === "on",
         request,
-    userId: user.id,
+        userId: user.id
     });
 };
 
@@ -62,7 +62,7 @@ export const meta: V2_MetaFunction = () => [{ title: "Login" }];
 
 export default function LoginPage() {
     const [searchParams] = useSearchParams();
-    const redirectTo = searchParams.get("redirectTo") || "/";
+    const redirectTo = searchParams.get("redirectTo") || "/listen";
     const actionData = useActionData<typeof action>();
     const emailRef = useRef<HTMLInputElement>(null);
     const passwordRef = useRef<HTMLInputElement>(null);
@@ -161,7 +161,7 @@ export default function LoginPage() {
                                 className="text-blue-500 underline"
                                 to={{
                                     pathname: "/join",
-                  search: searchParams.toString(),
+                                    search: searchParams.toString()
                                 }}
                             >
                                 Sign up

app/routes/logout.tsx

@@ -1,8 +1,7 @@
-import type { ActionArgs } from "@remix-run/node";
-import { redirect } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 
 import { logout } from "~/session.server";
 
-export const action = async ({ request }: ActionArgs) => logout(request);
-
-export const loader = async () => redirect("/");
+export async function loader({ request }: LoaderArgs) {
+    return logout(request);
+};

app/session.server.ts

@@ -90,7 +90,7 @@ export async function createUserSession({
 
 export async function logout(request: Request) {
     const session = await getSession(request);
-    return redirect("/", {
+    return redirect("/listen", {
         headers: {
             "Set-Cookie": await sessionStorage.destroySession(session)
         }