From 64cee08901e1ccc21675328ce5af1b7e7a5e1bc7 Mon Sep 17 00:00:00 2001
From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>
Date: Fri, 6 Nov 2026 15:01:36 +0900
Subject: parks: キーワード削除と地図クリック時の行強調
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

キーワード欄に削除ボタンを追加。地図で公園をクリックしたときはキーワードを変えず、一覧の該当行を強調して表示するようにした。
---
 src/components/ParksTable.astro | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

(limited to 'src/components/ParksTable.astro')

diff --git a/src/components/ParksTable.astro b/src/components/ParksTable.astro
index f2f9748..665a176 100644
--- a/src/components/ParksTable.astro
+++ b/src/components/ParksTable.astro
@@ -562,6 +562,12 @@ function isUnconfirmed(p: Park): boolean {
   .parks tbody tr.is-highlighted td {
     background: #fff59d !important;
   }
+  .parks tbody tr.is-selected td {
+    background: #ffe0b2 !important;
+  }
+  .parks tbody tr.is-selected td:first-child {
+    box-shadow: inset 4px 0 0 #e65100;
+  }
   .parks .is-address {
     font-size: 0.8em;
     white-space: normal;
@@ -703,6 +709,9 @@ function isUnconfirmed(p: Park): boolean {
     const select = document.querySelector<HTMLSelectElement>("[data-parks-town]");
     const kindSelect = document.querySelector<HTMLSelectElement>("[data-parks-kind]");
     const search = document.querySelector<HTMLInputElement>("[data-parks-search]");
+    const searchClear = document.querySelector<HTMLButtonElement>(
+      "[data-parks-search-clear]",
+    );
     const count = document.querySelector("[data-parks-count]");
     const none = root.querySelector<HTMLElement>("[data-parks-none]");
     const tbody = root.querySelector("tbody");
@@ -798,6 +807,7 @@ function isUnconfirmed(p: Park): boolean {
 
     const clearSelected = () => {
       selectedName = "";
+      allRows().forEach((row) => row.classList.remove("is-selected"));
     };
     select?.addEventListener("change", () => {
       clearSelected();
@@ -810,6 +820,17 @@ function isUnconfirmed(p: Park): boolean {
     search?.addEventListener("input", () => {
       clearSelected();
       applyFilter();
+      updateSearchClear();
+    });
+    const updateSearchClear = () => {
+      if (searchClear && search) searchClear.hidden = !search.value;
+    };
+    searchClear?.addEventListener("click", () => {
+      if (!search) return;
+      search.value = "";
+      updateSearchClear();
+      search.dispatchEvent(new Event("input", { bubbles: true }));
+      search.focus();
     });
     checks.forEach((c) =>
       c.addEventListener("change", () => {
@@ -822,6 +843,19 @@ function isUnconfirmed(p: Park): boolean {
       applyFilter();
     });
 
+    // 地図のポリゴンクリック時は、キーワードを変えずに一覧の行を強調する。
+    document.addEventListener("park:select-row", (e: Event) => {
+      const name = (e as CustomEvent).detail?.name;
+      if (!name) return;
+      allRows().forEach((row) => {
+        row.classList.toggle("is-selected", row.dataset.name === name);
+      });
+      const row = allRows().find((r) => r.dataset.name === name);
+      if (row && !row.classList.contains("is-hidden")) {
+        row.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    });
+
     // 地図のポリゴンクリックなどから、公園名で1件だけ絞り込む。
     document.addEventListener("park:filter-name", (e: Event) => {
       const detail = (e as CustomEvent).detail || {};
@@ -857,5 +891,6 @@ function isUnconfirmed(p: Park): boolean {
       });
     });
     applyFilter();
+    updateSearchClear();
   });
 </script>
-- 
cgit v1.3.1