訪問予定リストに別スポット種別のスポットも追加できるようにする (#45)

作成モード中、地図に重ねて表示している別種別スポットのピンをタップしても
本体スポットと同じく追加確認へ回す(handleOverlaySpotSelect)。作成中パネルと
追加確認は overlaySpotById で別種別スポットの名前を解決し、保存後のリスト詳細は
spotsById に無いIDを api.spots.get で補完する。

保存API(POST/PATCH)は経由スポットの挿入時に `and s.spot_type_id = $3` で
リストの種別に限定していたため別種別スポットが黙って落ちていた。この条件を外し、
存在するスポットなら種別を問わず入れられるようにした(itemsテーブルは元々種別非依存、
リスト自体のspot_type_idは所属の目印)。

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: rtcode337

app/api/visit-plan-lists/[id]/route.ts

@@ -80,7 +80,7 @@ export async function PATCH(
     );
   }
 
-  // 本人のリストであることを確認しつつ、経由スポットの絞り込み用に種別IDを得る
+  // 本人のリストであることを確認する(存在しなければ404)
   const owned = await query<{ spot_type_id: string }>(
     "select spot_type_id from visit_plan_lists where id = $1 and user_id = $2",
     [id, userId]
@@ -97,17 +97,18 @@ export async function PATCH(
     [title, description, startDate, endDate, id]
   );
 
-  // 経由スポットは丸ごと置き換える(重複除去+その種別のスポットに限定)
+  // 経由スポットは丸ごと置き換える(重複除去+存在するスポットに限定)。
+  // 地図で別スポット種別を重ねて追加できるため種別は問わない(itemsテーブルも種別非依存)
   await query("delete from visit_plan_list_items where list_id = $1", [id]);
   const ordered = spotIds.filter((s, i) => spotIds.indexOf(s) === i);
   if (ordered.length > 0) {
     await query(
       `insert into visit_plan_list_items (list_id, spot_id, seq)
        select $1, s.id, ord.seq
        from unnest($2::uuid[]) with ordinality as ord(spot_id, seq)
-       join spots s on s.id = ord.spot_id and s.spot_type_id = $3
+       join spots s on s.id = ord.spot_id
        on conflict (list_id, spot_id) do nothing`,
-      [id, ordered, spotTypeId]
+      [id, ordered]
     );
   }
 

app/api/visit-plan-lists/route.ts

@@ -104,16 +104,17 @@ export async function POST(request: Request) {
   const listId = rows[0].id;
 
   // 重複を除いた並び順のままseqを振って経由スポットを登録する。
-  // その種別に属する既存スポットだけを入れる(defensive)
+  // 存在するスポットだけを入れる(defensive)。地図で別スポット種別を重ねて追加できる
+  // ため種別は問わない(itemsテーブルも種別非依存。リスト自体のspot_type_idは所属の目印)
   const ordered = spotIds.filter((s, i) => spotIds.indexOf(s) === i);
   if (ordered.length > 0) {
     await query(
       `insert into visit_plan_list_items (list_id, spot_id, seq)
        select $1, s.id, ord.seq
        from unnest($2::uuid[]) with ordinality as ord(spot_id, seq)
-       join spots s on s.id = ord.spot_id and s.spot_type_id = $3
+       join spots s on s.id = ord.spot_id
        on conflict (list_id, spot_id) do nothing`,
-    [listId, ordered, spotTypeId]
+    [listId, ordered]
     );
   }
 

components/MapView.tsx

@@ -1123,6 +1123,29 @@ export default function MapView({
   // 重ね表示が無効の間は使われない(現在種別の値を返すだけ)
   const overlaySeriesStyles = useSeriesStyles(overlayTypeKey ?? spotTypeKey);
   const overlayCategories = useCategories(overlayTypeKey ?? spotTypeKey);
+
+  // 重ね表示(別種別)のピンのタップ: 作成モード中は本体ピンと同じく追加確認へ回す。
+  // それ以外は従来どおり読み取り専用の詳細を開く。ハンドラはレイヤー生成時に一度だけ
+  // 束縛されるため、buildModeRef を見て呼び出し時に分岐する(handleSpotSelectと同じ理由)
+  const handleOverlaySpotSelect = useCallback((id: string) => {
+    if (buildModeRef.current) setAddCandidate(id);
+    else setOverlayDetailSpotId(id);
+  }, []);
+
+  // 重ね表示スポットのID→Spot。作成中パネルや追加確認で別種別スポットの名前を解決する
+  const overlaySpotById = useMemo(() => {
+    const m = new Map<string, Spot>();
+    if (overlaySpots) for (const s of overlaySpots) m.set(s.id, s);
+    return m;
+  }, [overlaySpots]);
+
+  // 作成中パネルに渡す解決用マップ。本体スポットに重ね表示スポットを足したもの
+  // (IDが被ったら本体を優先)。これで別種別スポットも名前つきで一覧表示できる
+  const buildPanelSpotById = useMemo(() => {
+    const m = new Map(overlaySpotById);
+    for (const [id, s] of spotById) m.set(id, s);
+    return m;
+  }, [overlaySpotById, spotById]);
   // 重ね表示の絞り込み変更をその種別のlocalStorageへ保存しつつstateへ反映する
   // (overlayFiltersが変わると重ね表示の描画effectが再実行され、地図に即反映される)
   const setOverlayFiltersAndSave = useCallback(
@@ -1890,7 +1913,7 @@ export default function MapView({
       );
 
       const render = async () => {
-        ensureOverlayLayers(map, setOverlayDetailSpotId, setOverlayDetailRouteId);
+        ensureOverlayLayers(map, handleOverlaySpotSelect, setOverlayDetailRouteId);
         // クラスタは重ね先の種別の先頭シリーズの色で塗り、本体の青いクラスタと
         // 見分けられるようにする(シリーズ設定が空の種別は未知シリーズのピンと同系のグレー)
         const clusterColor = overlaySeriesStyles[0]?.color ?? "#9ca3af";
@@ -1933,6 +1956,7 @@ export default function MapView({
     overlaySeriesStyles,
     visitedIds,
     runWhenMapReady,
+    handleOverlaySpotSelect,
   ]);
 
   // 今回のセッションで送信した承認待ち/非公開スポットの仮ピン(破線)を表示
@@ -2378,7 +2402,7 @@ export default function MapView({
           title={buildDraft.title}
           editing={buildDraft.editingId !== null}
           spotIds={buildDraft.spotIds}
-          spotsById={spotById}
+          spotsById={buildPanelSpotById}
           seriesStyles={seriesStyles}
           saving={savingList}
           onReorder={(spotIds) =>
@@ -2411,7 +2435,8 @@ export default function MapView({
             className="w-full max-w-xs space-y-3 rounded-2xl bg-white p-4"
           >
             {(() => {
-              const spot = spotById.get(addCandidate);
+              const spot =
+                spotById.get(addCandidate) ?? overlaySpotById.get(addCandidate);
               const already = buildDraft.spotIds.includes(addCandidate);
               return (
                 <>

components/VisitPlanListDetailModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { api } from "@/lib/api-client";
 import { formatPlanDateRange } from "@/lib/planListDraft";
 import type { Spot, VisitPlanList } from "@/lib/types";
@@ -34,6 +34,10 @@ export default function VisitPlanListDetailModal({
   const [loading, setLoading] = useState(true);
   const [deleting, setDeleting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // 呼び出し側の spotsById に無い(＝別スポット種別を重ねて追加した)スポットを
+  // IDから個別取得して補完する。resolvedRef で一度取得したIDの再取得を防ぐ
+  const [extraSpots, setExtraSpots] = useState<Map<string, Spot>>(new Map());
+  const resolvedRef = useRef<Set<string>>(new Set());
 
   useEffect(() => {
     api.visitPlanLists.get(listId).then(({ data }) => {
@@ -42,6 +46,28 @@ export default function VisitPlanListDetailModal({
     });
   }, [listId]);
 
+  // 別種別スポット(spotsById に無いID)を api.spots.get で解決する
+  useEffect(() => {
+    if (!list) return;
+    const missing = list.spot_ids.filter(
+      (id) => !spotsById.has(id) && !resolvedRef.current.has(id)
+    );
+    if (missing.length === 0) return;
+    missing.forEach((id) => resolvedRef.current.add(id));
+    let cancelled = false;
+    Promise.all(missing.map((id) => api.spots.get(id))).then((results) => {
+      if (cancelled) return;
+      setExtraSpots((prev) => {
+        const next = new Map(prev);
+        for (const { data } of results) if (data) next.set(data.id, data);
+        return next;
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [list, spotsById]);
+
   const handleDelete = async () => {
     if (!list) return;
     if (!confirm(`「${list.title}」を削除しますか?`)) return;
@@ -99,7 +125,7 @@ export default function VisitPlanListDetailModal({
 
             <ol className="divide-y divide-gray-100 overflow-hidden rounded-xl border border-gray-200">
               {list.spot_ids.map((spotId, i) => {
-                const spot = spotsById.get(spotId);
+                const spot = spotsById.get(spotId) ?? extraSpots.get(spotId);
                 return (
                   <li key={spotId}>
                     <button