Fix episode player and episode list

frontend/src/App.tsx

@@ -1,9 +1,19 @@
-import { useState } from 'react'
+import { Routes, Route, Link, useLocation } from 'react-router-dom'
 import EpisodeList from './components/EpisodeList'
 import FeedManager from './components/FeedManager'
+import EpisodeDetail from './components/EpisodeDetail'
 
 function App() {
-  const [activeTab, setActiveTab] = useState<'episodes' | 'feeds'>('episodes')
+  const location = useLocation()
+  const isEpisodeDetail = location.pathname.startsWith('/episode/')
+
+  if (isEpisodeDetail) {
+    return (
+      <Routes>
+        <Route path="/episode/:episodeId" element={<EpisodeDetail />} />
+      </Routes>
+    )
+  }
 
   return (
     <div className="container">
@@ -13,23 +23,25 @@ function App() {
       </div>
 
       <div className="tabs">
-        <button
-          className={`tab ${activeTab === 'episodes' ? 'active' : ''}`}
-          onClick={() => setActiveTab('episodes')}
+        <Link
+          to="/"
+          className={`tab ${location.pathname === '/' ? 'active' : ''}`}
         >
           エピソード一覧
-        </button>
-        <button
-          className={`tab ${activeTab === 'feeds' ? 'active' : ''}`}
-          onClick={() => setActiveTab('feeds')}
+        </Link>
+        <Link
+          to="/feeds"
+          className={`tab ${location.pathname === '/feeds' ? 'active' : ''}`}
         >
           フィードリクエスト
-        </button>
+        </Link>
       </div>
 
       <div className="content">
-        {activeTab === 'episodes' && <EpisodeList />}
-        {activeTab === 'feeds' && <FeedManager />}
+        <Routes>
+          <Route path="/" element={<EpisodeList />} />
+          <Route path="/feeds" element={<FeedManager />} />
+        </Routes>
       </div>
     </div>
   )