@ripla/godd-mcp 1.0.4-canary.9 → 1.0.4

package/notes/app/src/components/IssueDetailView.tsx

@@ -0,0 +1,476 @@
+import { useState, useEffect, useCallback, useRef, lazy, Suspense } from "react";
+import {
+  getIssueApi,
+  createIssueApi,
+  updateIssueApi,
+  getErrorMessage,
+  isAbortError,
+} from "@/lib/api";
+import type { IssueDetail, IssueSummary } from "@/lib/api";
+import { useAuth } from "@/contexts/AuthContext";
+import { useToast } from "@/contexts/ToastContext";
+import { usePeriodicSync } from "@/hooks/usePeriodicSync";
+import {
+  GITHUB_SYNC_POLL_INTERVAL_MS,
+  hasIssueSnapshotChanged,
+  isIssueSnapshotStale,
+} from "@/lib/github-sync";
+import {
+  CircleDot,
+  CircleCheck,
+  ExternalLink,
+  Save,
+  X,
+  Pencil,
+  Plus,
+} from "lucide-react";
+import { ContentSkeleton, LoadingCircle } from "@/components/Skeleton";
+import LabelSelector from "@/components/LabelSelector";
+import IssueCommentThread from "@/components/IssueCommentThread";
+import {
+  ISSUE_MOBILE_ACTION_BUTTON,
+  ISSUE_MOBILE_ACTION_ROW,
+  ISSUE_MOBILE_DETAIL_ROOT,
+} from "@/lib/issue-mobile-layout";
+
+const FileContentView = lazy(() => import("@/components/FileContentView"));
+
+type IssueDetailViewProps = {
+  issueNumber: number | "new";
+  onCreated?: (issue: IssueSummary) => void;
+  onClose?: () => void;
+  onLabelsMutated?: () => void;
+  onExternalChange?: (issue: IssueDetail, options?: { background?: boolean }) => void;
+  syncEnabled?: boolean;
+};
+
+export default function IssueDetailView({
+  issueNumber,
+  onCreated,
+  onClose,
+  onLabelsMutated,
+  onExternalChange,
+  syncEnabled = false,
+}: IssueDetailViewProps) {
+  const { canEdit } = useAuth();
+  const { showToast } = useToast();
+
+  const isNew = issueNumber === "new";
+  const [issue, setIssue] = useState<IssueDetail | null>(null);
+  const [loading, setLoading] = useState(!isNew);
+  const [editing, setEditing] = useState(isNew);
+  const [saving, setSaving] = useState(false);
+
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [selectedLabels, setSelectedLabels] = useState<string[]>([]);
+
+  const loadRequestSeq = useRef(0);
+  const pollRequestSeq = useRef(0);
+  // freshness ゲート: 取得ごとに単調増加する世代を採番し、適用済み世代（appliedGen）以下の取得結果は
+  // 上書きしない。遅い foreground load が、後から始まったより新しい background poll を上書きするのを
+  // 防ぐ（#949・REQ-016-AC-13）。poll 失敗時は appliedGen を進めないため #934 / AC-10 の失敗ケースは維持。
+  // gen は単調増加のみでリセット不要: 別 Issue へ切り替わると `MainPage` が issueNumber を key に当 view を
+  // remount する（refs 初期化）。remount しない経路でも、旧 Issue の in-flight 取得は loadSeq/pollSeq で
+  // 棄却され、gen は衝突しないため誤適用は起きない。
+  const fetchGenSeq = useRef(0);
+  const appliedGen = useRef(0);
+  const editingRef = useRef(editing);
+  const issueRef = useRef(issue);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    editingRef.current = editing;
+  }, [editing]);
+
+  useEffect(() => {
+    issueRef.current = issue;
+  }, [issue]);
+
+  const beginLoadRequest = useCallback(() => {
+    loadRequestSeq.current += 1;
+    pollRequestSeq.current += 1;
+    fetchGenSeq.current += 1;
+    return { requestId: loadRequestSeq.current, gen: fetchGenSeq.current };
+  }, []);
+
+  const beginPollRequest = useCallback(() => {
+    pollRequestSeq.current += 1;
+    fetchGenSeq.current += 1;
+    return { requestId: pollRequestSeq.current, gen: fetchGenSeq.current };
+  }, []);
+
+  const loadIssue = useCallback(() => {
+    if (isNew) return;
+    const targetNumber = issueNumber as number;
+    const { requestId, gen } = beginLoadRequest();
+    // setIssue(null) で issueRef が一旦クリアされるため、stale 判定・復元の基準となる
+    // 取得開始時点の表示スナップショットを先に捕捉する（#978）
+    const previousSnapshot = issueRef.current;
+    setIssue(null);
+    setLoading(true);
+    getIssueApi(targetNumber)
+      .then((data) => {
+        if (!mountedRef.current || requestId !== loadRequestSeq.current) return;
+        // より新しい取得が適用済みならデータは上書きしない（loading は finally が解除）（#949）
+        if (gen <= appliedGen.current) return;
+        // foreground load も書込（save / label 変更）直後の eventual consistency で更新前(stale)応答を
+        // 返しうる。in-flight 中に適用された最新スナップショット（issueRef.current）、無ければ取得開始時の
+        // スナップショットより古い updatedAt、または同一秒で内容が後退する応答は反映せず表示を巻き戻さない
+        // （#978 / 同一秒は #979・poll 経路 #971 と同種）。
+        // stale 時は appliedGen を進めず（捨てた取得で世代を消費しない）、setIssue(null) で消えた表示を
+        // 基準スナップショットへ復元する。
+        const previous = issueRef.current ?? previousSnapshot;
+        if (isIssueSnapshotStale(previous, data)) {
+          if (previous) setIssue(previous);
+          return;
+        }
+        appliedGen.current = gen;
+        setIssue(data);
+        // 編集中（editing）は loadIssue の SUCCESS でも form state を上書きしない（#987・REQ-016-AC-17）。
+        // ラベル変更（onLabelsMutated）起因の再取得が happy path で成功しても、ユーザーが入力途中の
+        // title / body / selectedLabels を server 値へ巻き戻さない。issue スナップショット同期（setIssue）は
+        // 継続しつつ form 反映のみガードする（poll 経路は editingRef で早期 return・編集中保護として同種）。
+        if (!editingRef.current) {
+          setTitle(data.title);
+          setBody(data.body);
+          setSelectedLabels(data.labels.map((l) => l.name));
+        }
+      })
+      .catch((e) => {
+        if (isAbortError(e) || !mountedRef.current || requestId !== loadRequestSeq.current) return;
+        setIssue(null);
+        showToast(`Issue の読み込みに失敗しました: ${getErrorMessage(e)}`, "error");
+      })
+      .finally(() => {
+        if (mountedRef.current && requestId === loadRequestSeq.current) {
+          setLoading(false);
+        }
+      });
+  }, [issueNumber, isNew, showToast, beginLoadRequest]);
+
+  useEffect(() => {
+    loadIssue();
+  }, [loadIssue]);
+
+  const pollIssue = useCallback(async () => {
+    if (isNew || editingRef.current) return;
+    const targetNumber = issueNumber;
+    if (typeof targetNumber !== "number") return;
+    const { requestId, gen } = beginPollRequest();
+    try {
+      const data = await getIssueApi(targetNumber);
+      if (!mountedRef.current || requestId !== pollRequestSeq.current) return;
+      if (editingRef.current) return;
+      // より新しい取得が適用済みなら、この poll 結果（古い）は反映も外部変更通知も行わない（#949）
+      if (gen <= appliedGen.current) return;
+
+      const previous = issueRef.current;
+      // 書込（save / close-reopen）直後の eventual consistency で、save より後に開始した poll が
+      // 更新前の応答を返すことがある。取得開始順の freshness ゲート（#949）は通過してしまうため、
+      // 現在表示中より古い updatedAt（#971）、または同一秒で内容が後退する応答（#979）は stale と
+      // みなし反映も通知も行わない。
+      // stale 応答では appliedGen を進めない（#949 ゲートの意味は「採用した取得」であり、捨てた取得で
+      // 世代を消費すると、より早く開始した in-flight 取得の正当な結果が棄却されうる）。
+      // 次周期の poll が整合後データを返した時点で通常どおり最新へ更新される。
+      if (isIssueSnapshotStale(previous, data)) return;
+
+      appliedGen.current = gen;
+
+      const snapshotChanged = previous != null && hasIssueSnapshotChanged(previous, data);
+      const bodyChanged = previous == null || previous.body !== data.body;
+      if (!snapshotChanged && !bodyChanged) return;
+
+      if (snapshotChanged) {
+        onExternalChange?.(data, { background: true });
+      }
+      setIssue(data);
+      setTitle(data.title);
+      setBody(data.body);
+      setSelectedLabels(data.labels.map((l) => l.name));
+    } catch {
+      // バックグラウンド同期の失敗は UI を乱さない（手動再読み込みでエラー表示）
+    }
+  }, [issueNumber, isNew, onExternalChange, beginPollRequest]);
+
+  usePeriodicSync({
+    enabled: syncEnabled && !isNew && !editing,
+    intervalMs: GITHUB_SYNC_POLL_INTERVAL_MS,
+    onSync: pollIssue,
+    // マウント時の初回 loadIssue と即時 pollIssue の二重 dispatch を回避（#929）
+    skipInitialSync: true,
+  });
+
+  const handleSave = useCallback(async () => {
+    if (!title.trim()) {
+      showToast("タイトルを入力してください", "error");
+      return;
+    }
+    setSaving(true);
+    try {
+      if (isNew) {
+        const created = await createIssueApi({
+          title: title.trim(),
+          body,
+          labels: selectedLabels.length > 0 ? selectedLabels : undefined,
+        });
+        if (!mountedRef.current) return;
+        showToast(`Issue #${created.number} を作成しました`, "success");
+        setIssue(created);
+        setEditing(false);
+        onCreated?.(created);
+      } else {
+        beginPollRequest();
+        const updated = await updateIssueApi(issueNumber as number, {
+          title: title.trim(),
+          body,
+          labels: selectedLabels,
+        });
+        if (!mountedRef.current) return;
+        setIssue(updated);
+        setEditing(false);
+        showToast("Issue を更新しました", "success");
+        onExternalChange?.(updated);
+      }
+    } catch (e) {
+      if (!mountedRef.current) return;
+      showToast(`保存に失敗しました: ${getErrorMessage(e)}`, "error");
+    } finally {
+      if (mountedRef.current) setSaving(false);
+    }
+  }, [title, body, selectedLabels, isNew, issueNumber, showToast, onCreated, onExternalChange, beginPollRequest]);
+
+  const handleToggleState = useCallback(async () => {
+    if (!issue) return;
+    const newState = issue.state === "open" ? "closed" : "open";
+    setSaving(true);
+    try {
+      beginPollRequest();
+      const updated = await updateIssueApi(issue.number, { state: newState });
+      if (!mountedRef.current) return;
+      setIssue(updated);
+      onExternalChange?.(updated);
+      showToast(
+        newState === "closed" ? "Issue をクローズしました" : "Issue を再オープンしました",
+        "success",
+      );
+    } catch (e) {
+      if (!mountedRef.current) return;
+      showToast(`状態変更に失敗しました: ${getErrorMessage(e)}`, "error");
+    } finally {
+      if (mountedRef.current) setSaving(false);
+    }
+  }, [issue, showToast, onExternalChange, beginPollRequest]);
+
+  if (loading) {
+    return <LoadingCircle message="Issue を読み込み中…" />;
+  }
+
+  if (editing) {
+    return (
+      <div className={ISSUE_MOBILE_DETAIL_ROOT}>
+        <h2 className="text-lg font-bold text-gray-200 mb-4 flex items-center gap-2">
+          {isNew ? (
+            <>
+              <Plus className="w-5 h-5 text-green-400" />
+              新規 Issue 作成
+            </>
+          ) : (
+            <>
+              <Pencil className="w-5 h-5 text-blue-400" />
+              Issue #{issueNumber} 編集
+            </>
+          )}
+        </h2>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-xs text-gray-400 mb-1">タイトル</label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Issue のタイトル"
+              className="w-full px-3 py-2.5 sm:py-2 rounded bg-gray-900 border border-gray-600 text-gray-200 placeholder-gray-500 outline-none focus:border-blue-500 text-sm min-h-11 sm:min-h-0"
+              autoFocus
+            />
+          </div>
+
+          <LabelSelector
+            selected={selectedLabels}
+            onChange={setSelectedLabels}
+            disabled={saving}
+            canManageLabels={canEdit}
+            onLabelsMutated={() => {
+              onLabelsMutated?.();
+              if (!isNew) {
+                loadIssue();
+              }
+            }}
+          />
+
+          <div>
+            <label className="block text-xs text-gray-400 mb-1">本文（Markdown）</label>
+            <textarea
+              value={body}
+              onChange={(e) => setBody(e.target.value)}
+              placeholder="Issue の詳細を Markdown で記述…"
+              rows={12}
+              className="w-full px-3 py-2 rounded bg-gray-900 border border-gray-600 text-gray-200 placeholder-gray-500 outline-none focus:border-blue-500 text-sm font-mono resize-y"
+            />
+          </div>
+
+          <div className={ISSUE_MOBILE_ACTION_ROW}>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving || !title.trim()}
+              className={`${ISSUE_MOBILE_ACTION_BUTTON} bg-blue-600 hover:bg-blue-700 text-white transition-colors disabled:opacity-50 flex items-center justify-center gap-1.5`}
+            >
+              <Save className="w-4 h-4" />
+              {saving ? "保存中…" : isNew ? "作成" : "保存"}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                if (isNew) {
+                  onClose?.();
+                } else {
+                  setTitle(issue?.title ?? "");
+                  setBody(issue?.body ?? "");
+                  setSelectedLabels(issue?.labels.map((l) => l.name) ?? []);
+                  setEditing(false);
+                }
+              }}
+              className={`${ISSUE_MOBILE_ACTION_BUTTON} text-gray-400 hover:text-gray-200 hover:bg-gray-700 transition-colors flex items-center justify-center gap-1.5`}
+            >
+              <X className="w-4 h-4" />
+              キャンセル
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!issue) {
+    return (
+      <div className="flex items-center justify-center h-full p-6">
+        <p className="text-gray-500">Issue が見つかりませんでした</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={ISSUE_MOBILE_DETAIL_ROOT}>
+      {/* Header */}
+      <div className="mb-4">
+        <h1 className="text-lg sm:text-xl font-bold text-gray-100 flex flex-col gap-1 sm:flex-row sm:items-start sm:gap-2 break-words">
+          <span className="flex items-start gap-2 min-w-0">
+            {issue.state === "open" ? (
+              <CircleDot className="w-5 h-5 text-green-400 mt-0.5 shrink-0" />
+            ) : (
+              <CircleCheck className="w-5 h-5 text-purple-400 mt-0.5 shrink-0" />
+            )}
+            <span className="min-w-0">{issue.title}</span>
+          </span>
+          <span className="text-gray-500 font-normal shrink-0">#{issue.number}</span>
+        </h1>
+
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-xs text-gray-400">
+          <span>{issue.author}</span>
+          <span>
+            {new Date(issue.createdAt).toLocaleDateString("ja-JP")}
+          </span>
+          {issue.url && (
+            <a
+              href={issue.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1 text-blue-400 hover:text-blue-300"
+            >
+              <ExternalLink className="w-3 h-3" />
+              GitHub
+            </a>
+          )}
+        </div>
+
+        {issue.labels.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-2">
+            {issue.labels.map((l) => (
+              <span
+                key={l.name}
+                className="px-2 py-0.5 rounded-full text-xs"
+                style={{
+                  backgroundColor: `#${l.color}22`,
+                  color: `#${l.color}`,
+                  border: `1px solid #${l.color}44`,
+                }}
+              >
+                {l.name}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Action buttons */}
+        {canEdit && (
+          <div className={`${ISSUE_MOBILE_ACTION_ROW} mt-3`}>
+            <button
+              type="button"
+              onClick={() => setEditing(true)}
+              className={`${ISSUE_MOBILE_ACTION_BUTTON} bg-gray-700 hover:bg-gray-600 text-gray-200 transition-colors flex items-center justify-center gap-1.5`}
+            >
+              <Pencil className="w-3.5 h-3.5" />
+              編集
+            </button>
+            <button
+              type="button"
+              onClick={handleToggleState}
+              disabled={saving}
+              className={`${ISSUE_MOBILE_ACTION_BUTTON} transition-colors flex items-center justify-center gap-1.5 disabled:opacity-50 ${
+                issue.state === "open"
+                  ? "bg-purple-700/30 text-purple-300 hover:bg-purple-700/50"
+                  : "bg-green-700/30 text-green-300 hover:bg-green-700/50"
+              }`}
+            >
+              {issue.state === "open" ? (
+                <>
+                  <CircleCheck className="w-3.5 h-3.5" />
+                  クローズ
+                </>
+              ) : (
+                <>
+                  <CircleDot className="w-3.5 h-3.5" />
+                  再オープン
+                </>
+              )}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Body */}
+      {issue.body ? (
+        <div className="border-t border-gray-700 pt-4">
+          <Suspense fallback={<ContentSkeleton />}>
+            <FileContentView path="issue.md" content={issue.body} encoding="utf-8" />
+          </Suspense>
+        </div>
+      ) : (
+        <div className="border-t border-gray-700 pt-4">
+          <p className="text-gray-500 text-sm italic">本文がありません</p>
+        </div>
+      )}
+
+      <IssueCommentThread issueNumber={issue.number} canEdit={canEdit} />
+    </div>
+  );
+}