put link to home in "layout"

web/src/main.tsx

@@ -8,6 +8,7 @@ import { HomePage } from "./pages/home";
 import { PodcastPage } from "./pages/podcast";
 import { PlayerProvider } from "./player/provider";
 import { Player } from "./player/player";
+import { Link } from "react-router";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -23,6 +24,9 @@ createRoot(document.getElementById("root")!).render(
       <PlayerProvider>
         <div className="max-w-[1440px] w-full mx-auto p-2 relative">
           <BrowserRouter>
+            <Link to="/" className="w-fit">
+              <h1 className="text-3xl font-semibold">podcaster</h1>
+            </Link>
             <Routes>
               <Route path="/" element={<HomePage />} />
               <Route path="/podcasts/:id" element={<PodcastPage />} />

web/src/pages/home.tsx

@@ -1,4 +1,3 @@
-import { Link } from "react-router";
 import { usePodcastsQuery } from "../api/podcasts";
 import { NewPodcastForm } from "../components/NewPodcastForm";
 
@@ -7,10 +6,6 @@ export const HomePage = () => {
 
   return (
     <div>
-      <Link to="/">
-        <h1 className="text-3xl font-semibold">podcaster</h1>
-      </Link>
-
       <NewPodcastForm />
 
       <div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,250px)] gap-3 mt-5">

web/src/pages/podcast.tsx

@@ -4,7 +4,6 @@ import {
   usePodcastEpisodesQuery,
   useUpdateEpisodeMutation,
 } from "../api/episodes";
-import { Link } from "react-router";
 import { usePlayerContext } from "../player/context";
 import { PlayIcon } from "../icons/play";
 import { PauseIcon } from "../icons/pause";
@@ -80,10 +79,6 @@ export const PodcastPage = () => {
 
   return (
     <div>
-      <Link to="/">
-        <h1 className="text-3xl font-semibold">podcaster</h1>
-      </Link>
-
       <div className="mt-3 flex gap-2">
         <img src={podcast?.image} alt="" className="w-[300px] aspect-square" />
         <div className="flex flex-col gap-1">