parks: アイコン・フィルタ・編集画面を更新し、公開を一時停止

- 遊具アイコンをSVGRepo素材に差し替え、施設種別をアイコン表示
- フィルタに種類・遊具・ピクニックを追加し、適用時の地図移動を停止
- 現在地ボタンを追跡トグルに変更し、初回以外は地図を動かさない
- 編集画面を市内公園・周辺公園・公共施設の4タブに拡張
- 公園ページをドラフト化し、サイドバーとPWAの公開を停止

1 files changed, 184 insertions, 0 deletions

diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro
new file mode 100644
index 0000000..bf65d6e
--- /dev/null
+++ b/src/components/ParksFilters.astro
@@ -0,0 +1,184 @@
+---
+// 公園・公共施設の一覧を絞り込むコントロール。地図の上に表示する。
+// 実際の絞り込みは ParksTable.astro のスクリプトが行う。
+import { parks, towns, total } from "@/data/parks-rows";
+import { PARK_ICONS } from "@/data/park-icons";
+
+const facilityTypes = [
+  "図書館",
+  "公民館",
+  "児童館",
+  "地域センター",
+  "市役所支所",
+  "文化施設",
+].filter((type) =>
+  parks.some((p) => p["施設"] === "1" && p["種別"] === type),
+);
+---
+
+<div class="parks-controls" data-parks-filters>
+  <label>
+    <span>種類</span>
+    <select data-parks-kind>
+      <option value="">すべて</option>
+      <option value="park">公園</option>
+      {facilityTypes.map((type) => (
+        <option value={type}>{type}</option>
+      ))}
+    </select>
+  </label>
+  <label>
+    <span>町名</span>
+    <select data-parks-town>
+      <option value="">すべての町名</option>
+      {towns.map((town) => (
+        <option value={town}>{town}</option>
+      ))}
+    </select>
+  </label>
+  <label>
+    <span>キーワード</span>
+    <input type="search" data-parks-search placeholder="名称・住所・設備など" />
+  </label>
+  <fieldset class="parks-facilities">
+    <legend>設備・遊具で絞る</legend>
+    <label><input type="checkbox" data-fac-filter value="toilet" />トイレ</label>
+    <label><input type="checkbox" data-fac-filter value="water" />水飲み場・給水</label>
+    <label>
+      <input type="checkbox" data-fac-filter value="picnic" />
+      <span class="filter-icon" set:html={PARK_ICONS.picnic.svg} />ピクニック・広場
+    </label>
+    <label><input type="checkbox" data-fac-filter value="toy" />遊具あり</label>
+    <label>
+      <input type="checkbox" data-fac-filter value="sand" />
+      <span class="filter-icon" set:html={PARK_ICONS.sand.svg} />砂場
+    </label>
+    <label>
+      <input type="checkbox" data-fac-filter value="swing" />
+      <span class="filter-icon" set:html={PARK_ICONS.swing.svg} />ブランコ
+    </label>
+    <label>
+      <input type="checkbox" data-fac-filter value="seesaw" />
+      <span class="filter-icon" set:html={PARK_ICONS.teeter.svg} />シーソー
+    </label>
+    <label>
+      <input type="checkbox" data-fac-filter value="spring" />
+      <span class="filter-icon" set:html={PARK_ICONS.spring.svg} />スプリング遊具
+    </label>
+    <label>
+      <input type="checkbox" data-fac-filter value="jungle" />
+      <span class="filter-icon" set:html={PARK_ICONS.climbing.svg} />ジャングルジム
+    </label>
+    <label>
+      <input type="checkbox" data-fac-filter value="plane" />
+      <span class="filter-icon" set:html={PARK_ICONS.airplane.svg} />ヒコーキ
+    </label>
+    <label>
+      <input type="checkbox" data-fac-filter value="slide" />
+      <span class="filter-icon" set:html={PARK_ICONS.slide.svg} />滑り台
+    </label>
+    <label>
+      <input type="checkbox" data-fac-filter value="complex" />
+      <span class="filter-icon" set:html={PARK_ICONS.playground.svg} />複合遊具
+    </label>
+    <label>
+      <input type="checkbox" data-fac-filter value="rope" />
+      <span class="filter-icon" set:html={PARK_ICONS.flyingfox.svg} />ロープウェイ
+    </label>
+    <label>
+      <input type="checkbox" data-fac-filter value="ball" />
+      <span class="filter-icon" set:html={PARK_ICONS.ball.svg} />ボール遊び
+    </label>
+  </fieldset>
+  <span class="parks-count" data-parks-count aria-live="polite">{total}件</span>
+</div>
+
+<p class="parks-disclaimer">
+  情報には誤りが含まれる場合があります。最新の情報は各施設の公式ページでご確認ください。
+</p>
+
+<style>
+  .parks-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.9rem;
+    align-items: center;
+    margin: 0 0 0.55rem;
+  }
+  .parks-controls label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-height: 2.1rem;
+    font-size: 0.9rem;
+    line-height: 1.2;
+  }
+  .parks-controls label > span {
+    line-height: 1.2;
+  }
+  .parks-controls select,
+  .parks-controls input[type="search"] {
+    height: 2.1rem;
+    box-sizing: border-box;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--sl-color-hairline, #ccc);
+    border-radius: 0.3rem;
+    background: var(--sl-color-bg, #fff);
+    color: var(--sl-color-text, inherit);
+    font: inherit;
+    line-height: 1.2;
+  }
+  .parks-facilities {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.1rem 0.6rem;
+    align-items: center;
+    margin: 0;
+    padding: 0.2rem 0.5rem;
+    border: 1px solid var(--sl-color-hairline, #ccc);
+    border-radius: 0.3rem;
+  }
+  .parks-facilities legend {
+    padding: 0 0.2rem;
+    font-size: 0.78em;
+    color: inherit;
+    opacity: 0.7;
+  }
+  .parks-facilities label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+    min-height: 1.5rem;
+    font-size: 0.8rem;
+    line-height: 1.2;
+  }
+  .parks-facilities input[type="checkbox"] {
+    width: 0.9em;
+    height: 0.9em;
+    margin: 0;
+  }
+  .filter-icon {
+    display: inline-flex;
+    width: 18px;
+    height: 18px;
+    flex: none;
+  }
+  .filter-icon :global(svg) {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  :global(.filter-icon svg *) {
+    vector-effect: non-scaling-stroke;
+  }
+  .parks-count {
+    margin-left: auto;
+    font-size: 0.9rem;
+    opacity: 0.75;
+  }
+  .parks-disclaimer {
+    margin: 0 0 0.55rem;
+    color: var(--sl-color-gray-2);
+    font-size: 0.78rem;
+  }
+</style>