Add searching feature

frontend/src/components/EpisodeList.tsx

@@ -32,9 +32,13 @@ interface EpisodeWithFeedInfo {
 
 function EpisodeList() {
   const [episodes, setEpisodes] = useState<EpisodeWithFeedInfo[]>([]);
-  const [filteredEpisodes, setFilteredEpisodes] = useState<EpisodeWithFeedInfo[]>([]);
+  const [filteredEpisodes, setFilteredEpisodes] = useState<
+    EpisodeWithFeedInfo[]
+  >([]);
   const [categories, setCategories] = useState<string[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<string>("");
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [isSearching, setIsSearching] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [currentAudio, setCurrentAudio] = useState<string | null>(null);
@@ -46,8 +50,12 @@ function EpisodeList() {
   }, [useDatabase]);
 
   useEffect(() => {
-    filterEpisodesByCategory();
-  }, [episodes, selectedCategory]);
+    if (searchQuery.trim()) {
+      performSearch();
+    } else {
+      filterEpisodesByCategory();
+    }
+  }, [episodes, selectedCategory, searchQuery]);
 
   const fetchEpisodes = async () => {
     try {
@@ -127,12 +135,41 @@ function EpisodeList() {
     }
   };
 
+  const performSearch = async () => {
+    try {
+      setIsSearching(true);
+      setError(null);
+
+      const searchParams = new URLSearchParams({
+        q: searchQuery.trim(),
+      });
+
+      if (selectedCategory) {
+        searchParams.append("category", selectedCategory);
+      }
+
+      const response = await fetch(`/api/episodes/search?${searchParams}`);
+      if (!response.ok) {
+        throw new Error("検索に失敗しました");
+      }
+
+      const data = await response.json();
+      setFilteredEpisodes(data.episodes || []);
+    } catch (err) {
+      console.error("Search error:", err);
+      setError(err instanceof Error ? err.message : "検索エラーが発生しました");
+      setFilteredEpisodes([]);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
   const filterEpisodesByCategory = () => {
     if (!selectedCategory) {
       setFilteredEpisodes(episodes);
     } else {
-      const filtered = episodes.filter(episode => 
-        episode.feedCategory === selectedCategory
+      const filtered = episodes.filter(
+        (episode) => episode.feedCategory === selectedCategory,
       );
       setFilteredEpisodes(filtered);
     }
@@ -197,19 +234,53 @@ function EpisodeList() {
     return <div className="error">{error}</div>;
   }
 
-  if (filteredEpisodes.length === 0 && episodes.length > 0 && selectedCategory) {
-    return (
-      <div className="empty-state">
-        <p>カテゴリ「{selectedCategory}」のエピソードがありません</p>
-        <button
-          className="btn btn-secondary"
-          onClick={() => setSelectedCategory("")}
-          style={{ marginTop: "10px" }}
-        >
-          全てのエピソードを表示
-        </button>
-      </div>
-    );
+  if (filteredEpisodes.length === 0 && episodes.length > 0) {
+    if (searchQuery.trim()) {
+      return (
+        <div className="empty-state">
+          <p>「{searchQuery}」の検索結果がありません</p>
+          {selectedCategory && (
+            <p>カテゴリ「{selectedCategory}」内で検索しています</p>
+          )}
+          <div
+            style={{
+              marginTop: "10px",
+              display: "flex",
+              gap: "10px",
+              justifyContent: "center",
+            }}
+          >
+            <button
+              className="btn btn-secondary"
+              onClick={() => setSearchQuery("")}
+            >
+              検索をクリア
+            </button>
+            {selectedCategory && (
+              <button
+                className="btn btn-secondary"
+                onClick={() => setSelectedCategory("")}
+              >
+                全カテゴリで検索
+              </button>
+            )}
+          </div>
+        </div>
+      );
+    } else if (selectedCategory) {
+      return (
+        <div className="empty-state">
+          <p>カテゴリ「{selectedCategory}」のエピソードがありません</p>
+          <button
+            className="btn btn-secondary"
+            onClick={() => setSelectedCategory("")}
+            style={{ marginTop: "10px" }}
+          >
+            全てのエピソードを表示
+          </button>
+        </div>
+      );
+    }
   }
 
   if (episodes.length === 0) {
@@ -235,22 +306,79 @@ function EpisodeList() {
       <div
         style={{
           marginBottom: "20px",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
         }}
       >
-        <h2>エピソード一覧 ({selectedCategory ? `${filteredEpisodes.length}/${episodes.length}` : episodes.length}件)</h2>
-        <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "15px",
+          }}
+        >
+          <h2>
+            エピソード一覧 (
+            {searchQuery
+              ? `検索結果: ${filteredEpisodes.length}件`
+              : selectedCategory
+                ? `${filteredEpisodes.length}/${episodes.length}件`
+                : `${episodes.length}件`}
+            )
+          </h2>
+          <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
+            <span style={{ fontSize: "12px", color: "#666" }}>
+              データソース: {useDatabase ? "データベース" : "XML"}
+            </span>
+            <button className="btn btn-secondary" onClick={fetchEpisodes}>
+              更新
+            </button>
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            gap: "10px",
+            alignItems: "center",
+            flexWrap: "wrap",
+          }}
+        >
+          <input
+            type="text"
+            placeholder="エピソードを検索..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{
+              flex: "1",
+              minWidth: "200px",
+              padding: "8px 12px",
+              fontSize: "14px",
+              border: "1px solid #ccc",
+              borderRadius: "4px",
+            }}
+          />
+          {searchQuery && (
+            <button
+              className="btn btn-secondary"
+              onClick={() => setSearchQuery("")}
+              style={{
+                padding: "8px 12px",
+                fontSize: "14px",
+              }}
+            >
+              クリア
+            </button>
+          )}
           {categories.length > 0 && (
             <select
               value={selectedCategory}
               onChange={(e) => setSelectedCategory(e.target.value)}
               style={{
-                padding: "5px 10px",
+                padding: "8px 12px",
                 fontSize: "14px",
                 border: "1px solid #ccc",
                 borderRadius: "4px",
+                minWidth: "120px",
               }}
             >
               <option value="">全カテゴリ</option>
@@ -261,12 +389,9 @@ function EpisodeList() {
               ))}
             </select>
           )}
-          <span style={{ fontSize: "12px", color: "#666" }}>
-            データソース: {useDatabase ? "データベース" : "XML"}
-          </span>
-          <button className="btn btn-secondary" onClick={fetchEpisodes}>
-            更新
-          </button>
+          {isSearching && (
+            <span style={{ fontSize: "14px", color: "#666" }}>検索中...</span>
+          )}
         </div>
       </div>
 
@@ -309,7 +434,13 @@ function EpisodeList() {
                       {episode.feedTitle}
                     </Link>
                     {episode.feedCategory && (
-                      <span style={{ marginLeft: "8px", color: "#999", fontSize: "11px" }}>
+                      <span
+                        style={{
+                          marginLeft: "8px",
+                          color: "#999",
+                          fontSize: "11px",
+                        }}
+                      >
                         ({episode.feedCategory})
                       </span>
                     )}