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

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

@@ -0,0 +1,452 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Tag, Plus, Check, X, Loader2, Pencil, Trash2 } from "lucide-react";
+import {
+  listIssueLabelsApi,
+  createLabelApi,
+  updateLabelApi,
+  deleteLabelApi,
+  getErrorMessage,
+} from "@/lib/api";
+import type { IssueLabel } from "@/lib/api";
+import { useToast } from "@/contexts/ToastContext";
+
+type LabelSelectorProps = {
+  selected: string[];
+  onChange: (names: string[]) => void;
+  disabled?: boolean;
+  /** admin/editor: create, edit, delete repository labels */
+  canManageLabels?: boolean;
+  onLabelsMutated?: () => void;
+};
+
+const PRESET_COLORS = [
+  "e11d48", "ea580c", "ca8a04", "16a34a",
+  "0284c7", "7c3aed", "db2777", "64748b",
+];
+
+export default function LabelSelector({
+  selected,
+  onChange,
+  disabled = false,
+  canManageLabels = false,
+  onLabelsMutated,
+}: LabelSelectorProps) {
+  const { showToast } = useToast();
+  const [open, setOpen] = useState(false);
+  const [labels, setLabels] = useState<IssueLabel[]>([]);
+  const [loadingLabels, setLoadingLabels] = useState(false);
+  const [creatingMode, setCreatingMode] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [newColor, setNewColor] = useState(PRESET_COLORS[0]);
+  const [creating, setCreating] = useState(false);
+  const [editingName, setEditingName] = useState<string | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editColor, setEditColor] = useState(PRESET_COLORS[0]);
+  const [savingEdit, setSavingEdit] = useState(false);
+  const [confirmDeleteName, setConfirmDeleteName] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const loadLabels = useCallback(async () => {
+    setLoadingLabels(true);
+    try {
+      const { labels: data } = await listIssueLabelsApi();
+      setLabels(data);
+    } catch (e) {
+      showToast(`ラベルの読み込みに失敗しました: ${getErrorMessage(e)}`, "error");
+    } finally {
+      setLoadingLabels(false);
+    }
+  }, [showToast]);
+
+  useEffect(() => {
+    if (open && labels.length === 0) {
+      void loadLabels();
+    }
+  }, [open, labels.length, loadLabels]);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setCreatingMode(false);
+        setEditingName(null);
+        setConfirmDeleteName(null);
+      }
+    }
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+
+  function toggleLabel(name: string) {
+    if (selected.includes(name)) {
+      onChange(selected.filter((n) => n !== name));
+    } else {
+      onChange([...selected, name]);
+    }
+  }
+
+  function applyLabelRemoval(name: string) {
+    setLabels((prev) => prev.filter((l) => l.name !== name));
+    if (selected.includes(name)) {
+      onChange(selected.filter((n) => n !== name));
+    }
+  }
+
+  async function handleCreateLabel() {
+    if (!newName.trim()) {
+      showToast("ラベル名を入力してください", "error");
+      return;
+    }
+    setCreating(true);
+    try {
+      const created = await createLabelApi({ name: newName.trim(), color: newColor });
+      setLabels((prev) => [...prev, created]);
+      onChange([...selected, created.name]);
+      setNewName("");
+      setNewColor(PRESET_COLORS[0]);
+      setCreatingMode(false);
+      showToast(`ラベル「${created.name}」を作成しました`, "success");
+      onLabelsMutated?.();
+    } catch (e) {
+      showToast(`ラベルの作成に失敗しました: ${getErrorMessage(e)}`, "error");
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  function startEditLabel(label: IssueLabel) {
+    setCreatingMode(false);
+    setConfirmDeleteName(null);
+    setEditingName(label.name);
+    setEditName(label.name);
+    setEditColor(label.color || PRESET_COLORS[0]);
+  }
+
+  async function handleUpdateLabel() {
+    if (!editingName || !editName.trim()) {
+      showToast("ラベル名を入力してください", "error");
+      return;
+    }
+    setSavingEdit(true);
+    try {
+      const payload: { new_name?: string; color: string } = { color: editColor };
+      if (editName.trim() !== editingName) {
+        payload.new_name = editName.trim();
+      }
+      const updated = await updateLabelApi(editingName, payload);
+      setLabels((prev) =>
+        prev.map((l) => (l.name === editingName ? updated : l)),
+      );
+      if (selected.includes(editingName) && updated.name !== editingName) {
+        onChange(selected.map((n) => (n === editingName ? updated.name : n)));
+      }
+      setEditingName(null);
+      showToast(`ラベル「${updated.name}」を更新しました`, "success");
+      onLabelsMutated?.();
+    } catch (e) {
+      showToast(`ラベルの更新に失敗しました: ${getErrorMessage(e)}`, "error");
+    } finally {
+      setSavingEdit(false);
+    }
+  }
+
+  async function handleDeleteLabel(name: string) {
+    setDeleting(true);
+    try {
+      await deleteLabelApi(name);
+      applyLabelRemoval(name);
+      setConfirmDeleteName(null);
+      showToast(`ラベル「${name}」を削除しました`, "success");
+      onLabelsMutated?.();
+    } catch (e) {
+      showToast(`ラベルの削除に失敗しました: ${getErrorMessage(e)}`, "error");
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  function renderColorPicker(
+    value: string,
+    onPick: (c: string) => void,
+  ) {
+    return (
+      <div className="flex gap-1 flex-wrap">
+        {PRESET_COLORS.map((c) => (
+          <button
+            key={c}
+            type="button"
+            aria-label={`色 #${c}`}
+            onClick={() => onPick(c)}
+            className={`w-5 h-5 rounded-full transition-transform ${
+              value === c ? "scale-125 ring-2 ring-white" : "hover:scale-110"
+            }`}
+            style={{ backgroundColor: `#${c}` }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className="relative">
+      <label className="block text-xs text-gray-400 mb-1">ラベル</label>
+
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-expanded={open}
+        aria-label="ラベルを選択"
+        onClick={() => !disabled && setOpen((v) => !v)}
+        onKeyDown={(e) => {
+          if (!disabled && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            setOpen((v) => !v);
+          }
+        }}
+        className={`min-h-[38px] w-full px-3 py-1.5 rounded bg-gray-900 border text-sm flex flex-wrap gap-1 items-center cursor-pointer transition-colors ${
+          disabled
+            ? "border-gray-700 cursor-not-allowed opacity-50"
+            : open
+            ? "border-blue-500"
+            : "border-gray-600 hover:border-gray-400"
+        }`}
+      >
+        {selected.length === 0 ? (
+          <span className="text-gray-500 flex items-center gap-1">
+            <Tag className="w-3 h-3" />
+            ラベルを選択…
+          </span>
+        ) : (
+          selected.map((name) => {
+            const label = labels.find((l) => l.name === name);
+            const color = label?.color ?? "64748b";
+            return (
+              <span
+                key={name}
+                className="flex items-center gap-1 px-2 py-0.5 rounded-full text-xs"
+                style={{
+                  backgroundColor: `#${color}22`,
+                  color: `#${color}`,
+                  border: `1px solid #${color}44`,
+                }}
+              >
+                {name}
+                {!disabled && (
+                  <button
+                    type="button"
+                    aria-label={`${name} を外す`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleLabel(name);
+                    }}
+                    className="hover:opacity-70"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                )}
+              </span>
+            );
+          })
+        )}
+      </div>
+
+      {open && (
+        <div className="absolute z-50 mt-1 w-full rounded border border-gray-600 bg-gray-800 shadow-xl">
+          {loadingLabels ? (
+            <div className="flex items-center gap-2 px-3 py-3 text-sm text-gray-400">
+              <Loader2 className="w-4 h-4 animate-spin" />
+              読み込み中…
+            </div>
+          ) : (
+            <ul className="max-h-48 overflow-y-auto">
+              {labels.length === 0 && (
+                <li className="px-3 py-2 text-sm text-gray-500">
+                  ラベルがありません
+                </li>
+              )}
+              {labels.map((label) => {
+                const isSelected = selected.includes(label.name);
+                const isConfirmingDelete = confirmDeleteName === label.name;
+                return (
+                  <li key={label.name} className="border-b border-gray-700/50 last:border-0">
+                    {isConfirmingDelete ? (
+                      <div className="px-3 py-2 space-y-2">
+                        <p className="text-xs text-gray-300">
+                          「{label.name}」を削除しますか？リポジトリ内の全 Issue から外れます。
+                        </p>
+                        <div className="flex gap-1">
+                          <button
+                            type="button"
+                            disabled={deleting}
+                            onClick={() => void handleDeleteLabel(label.name)}
+                            className="flex-1 px-2 py-1 rounded text-xs bg-red-700 hover:bg-red-600 text-white disabled:opacity-50"
+                          >
+                            {deleting ? "削除中…" : "削除する"}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => setConfirmDeleteName(null)}
+                            className="px-2 py-1 rounded text-xs text-gray-400 hover:bg-gray-700"
+                          >
+                            キャンセル
+                          </button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-1 px-2 py-1.5 hover:bg-gray-700/60">
+                        <button
+                          type="button"
+                          onClick={() => toggleLabel(label.name)}
+                          className="flex-1 flex items-center gap-2 text-sm min-w-0"
+                        >
+                          <span
+                            className="w-3 h-3 rounded-full shrink-0"
+                            style={{ backgroundColor: `#${label.color}` }}
+                          />
+                          <span
+                            className="flex-1 text-left truncate"
+                            style={{ color: `#${label.color}` }}
+                          >
+                            {label.name}
+                          </span>
+                          {isSelected && (
+                            <Check className="w-4 h-4 text-blue-400 shrink-0" />
+                          )}
+                        </button>
+                        {canManageLabels && !disabled && (
+                          <div className="flex shrink-0 gap-0.5">
+                            <button
+                              type="button"
+                              aria-label={`${label.name} を編集`}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                startEditLabel(label);
+                              }}
+                              className="p-1 rounded text-gray-400 hover:text-gray-200 hover:bg-gray-600"
+                            >
+                              <Pencil className="w-3.5 h-3.5" />
+                            </button>
+                            <button
+                              type="button"
+                              aria-label={`${label.name} を削除`}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setEditingName(null);
+                                setConfirmDeleteName(label.name);
+                              }}
+                              className="p-1 rounded text-gray-400 hover:text-red-300 hover:bg-gray-600"
+                            >
+                              <Trash2 className="w-3.5 h-3.5" />
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+
+          {canManageLabels && !disabled && (
+            <div className="border-t border-gray-600">
+              {editingName ? (
+                <div className="p-2 space-y-2">
+                  <p className="text-xs text-gray-400">ラベルを編集</p>
+                  <input
+                    autoFocus
+                    type="text"
+                    value={editName}
+                    onChange={(e) => setEditName(e.target.value)}
+                    placeholder="ラベル名"
+                    maxLength={50}
+                    className="w-full px-2 py-1 rounded bg-gray-900 border border-gray-600 text-gray-200 placeholder-gray-500 text-xs outline-none focus:border-blue-500"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") void handleUpdateLabel();
+                      if (e.key === "Escape") setEditingName(null);
+                    }}
+                  />
+                  {renderColorPicker(editColor, setEditColor)}
+                  <div className="flex gap-1">
+                    <button
+                      type="button"
+                      onClick={() => void handleUpdateLabel()}
+                      disabled={savingEdit || !editName.trim()}
+                      className="flex-1 px-2 py-1 rounded text-xs bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50"
+                    >
+                      {savingEdit ? "保存中…" : "保存"}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setEditingName(null)}
+                      className="px-2 py-1 rounded text-xs text-gray-400 hover:bg-gray-700"
+                    >
+                      キャンセル
+                    </button>
+                  </div>
+                </div>
+              ) : creatingMode ? (
+                <div className="p-2 space-y-2">
+                  <input
+                    autoFocus
+                    type="text"
+                    value={newName}
+                    onChange={(e) => setNewName(e.target.value)}
+                    placeholder="ラベル名"
+                    maxLength={50}
+                    className="w-full px-2 py-1 rounded bg-gray-900 border border-gray-600 text-gray-200 placeholder-gray-500 text-xs outline-none focus:border-blue-500"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") void handleCreateLabel();
+                      if (e.key === "Escape") setCreatingMode(false);
+                    }}
+                  />
+                  {renderColorPicker(newColor, setNewColor)}
+                  <div className="flex gap-1">
+                    <button
+                      type="button"
+                      onClick={() => void handleCreateLabel()}
+                      disabled={creating || !newName.trim()}
+                      className="flex-1 px-2 py-1 rounded text-xs bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50 flex items-center justify-center gap-1"
+                    >
+                      {creating ? (
+                        <Loader2 className="w-3 h-3 animate-spin" />
+                      ) : (
+                        <Plus className="w-3 h-3" />
+                      )}
+                      作成
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setCreatingMode(false);
+                        setNewName("");
+                      }}
+                      className="px-2 py-1 rounded text-xs text-gray-400 hover:text-gray-200 hover:bg-gray-700"
+                    >
+                      キャンセル
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setConfirmDeleteName(null);
+                    setCreatingMode(true);
+                  }}
+                  className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-400 hover:text-gray-200 hover:bg-gray-700 transition-colors"
+                >
+                  <Plus className="w-4 h-4" />
+                  新規ラベルを作成…
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/{notes-app → notes/app}/src/components/MarkdownEditor.tsx

@@ -3,7 +3,7 @@ import {
   Undo2, Redo2, AlignLeft, AlignCenter, AlignRight,
   List, ListOrdered, TextQuote, Grid3X3, Minus, ImagePlus, X,
 } from "lucide-react";
-import { useEditor, EditorContent, ReactNodeViewRenderer } from "@tiptap/react";
+import { useEditor, EditorContent, ReactNodeViewRenderer, Extension } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import { common, createLowlight } from "lowlight";
@@ -19,11 +19,14 @@ import { Markdown } from "@tiptap/markdown";
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCaret from "@tiptap/extension-collaboration-caret";
 import { Plugin } from "@tiptap/pm/state";
+import { buildHighlightDecorations } from "@/lib/commentHighlight";
 import type { AnyExtension, Editor } from "@tiptap/react";
 import type * as Y from "yjs";
 import type { WebsocketProvider } from "y-websocket";
 import { uploadImageApi } from "@/lib/api";
 import { useToast } from "@/contexts/ToastContext";
+import type { CommentAnchor } from "@/lib/commentAnchor";
+import CommentSelectionPopover from "./CommentSelectionPopover";
 import CodeBlockView from "./CodeBlockView";
 
 const lowlight = createLowlight(common);
@@ -45,8 +48,27 @@ type Props = {
   ydoc?: Y.Doc | null;
   provider?: WebsocketProvider | null;
   collabUser?: { name: string; color: string } | null;
+  onCommentAnchor?: (anchor: CommentAnchor) => void;
+  commentHighlights?: CommentAnchor[];
 };
 
+function getEditorSelectionAnchor(editor: Editor): CommentAnchor | null {
+  const { from, to, empty } = editor.state.selection;
+  if (empty) return null;
+
+  const anchor_text = editor.state.doc.textBetween(from, to, "\n").trim();
+  if (!anchor_text) return null;
+
+  const textBefore = editor.state.doc.textBetween(0, from, "\n");
+  const selected = editor.state.doc.textBetween(from, to, "\n");
+
+  return {
+    anchor_text,
+    position_from: textBefore.length,
+    position_to: textBefore.length + selected.length,
+  };
+}
+
 function ToolbarButton({
   onClick,
   active,
@@ -314,10 +336,23 @@ export default function MarkdownEditor({
   ydoc,
   provider,
   collabUser,
+  onCommentAnchor,
+  commentHighlights = [],
 }: Props) {
   const { showToast } = useToast();
   const onContentChangeRef = useRef(onContentChange);
   onContentChangeRef.current = onContentChange;
+  const onCommentAnchorRef = useRef(onCommentAnchor);
+  onCommentAnchorRef.current = onCommentAnchor;
+  const commentHighlightsRef = useRef(commentHighlights);
+  commentHighlightsRef.current = commentHighlights;
+
+  const [selectionPopover, setSelectionPopover] = useState<{
+    top: number;
+    left: number;
+    anchor: CommentAnchor;
+  } | null>(null);
+  const sourceTextareaRef = useRef<HTMLTextAreaElement>(null);
 
   const [mode, setMode] = useState<EditorMode>("wysiwyg");
   const [sourceText, setSourceText] = useState("");
@@ -388,6 +423,28 @@ export default function MarkdownEditor({
     },
   }), []);
 
+  const commentHighlightExtension = useMemo(
+    () =>
+      Extension.create({
+        name: "commentHighlight",
+        addProseMirrorPlugins() {
+          return [
+            new Plugin({
+              props: {
+                decorations(state) {
+                  return buildHighlightDecorations(
+                    state.doc,
+                    commentHighlightsRef.current,
+                  );
+                },
+              },
+            }),
+          ];
+        },
+      }),
+    [],
+  );
+
   const collabExtensions = useMemo((): AnyExtension[] => {
     if (!ydoc) return [];
     const exts: AnyExtension[] = [
@@ -428,6 +485,7 @@ export default function MarkdownEditor({
       Markdown.configure({
         markedOptions: { breaks: true, gfm: true },
       }),
+      commentHighlightExtension,
       ...collabExtensions,
     ],
     content: initialContent,
@@ -437,6 +495,72 @@ export default function MarkdownEditor({
     },
   });
 
+  useEffect(() => {
+    editor?.view.dispatch(editor.state.tr);
+  }, [editor, commentHighlights]);
+
+  useEffect(() => {
+    if (!editor || !onCommentAnchor) return;
+
+    const handleSelectionUpdate = () => {
+      const sel = window.getSelection();
+      if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
+        setSelectionPopover(null);
+        return;
+      }
+
+      const anchor = getEditorSelectionAnchor(editor);
+      if (!anchor) {
+        setSelectionPopover(null);
+        return;
+      }
+
+      const rect = sel.getRangeAt(0).getBoundingClientRect();
+      setSelectionPopover({
+        top: rect.top,
+        left: rect.left + rect.width / 2,
+        anchor,
+      });
+    };
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, onCommentAnchor]);
+
+  const handleSourceSelection = useCallback(() => {
+    if (!onCommentAnchorRef.current) return;
+    const textarea = sourceTextareaRef.current;
+    if (!textarea) return;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    if (start === end) {
+      setSelectionPopover(null);
+      return;
+    }
+
+    const anchor_text = sourceText.slice(start, end).trim();
+    if (!anchor_text) {
+      setSelectionPopover(null);
+      return;
+    }
+
+    const anchor: CommentAnchor = {
+      anchor_text,
+      position_from: start,
+      position_to: end,
+    };
+
+    const rect = textarea.getBoundingClientRect();
+    setSelectionPopover({
+      top: rect.top + 24,
+      left: rect.left + rect.width / 2,
+      anchor,
+    });
+  }, [sourceText]);
+
   const [showSearch, setShowSearch] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [replaceTerm, setReplaceTerm] = useState("");
@@ -671,17 +795,31 @@ export default function MarkdownEditor({
               prose-pre:bg-gray-800 prose-pre:border prose-pre:border-gray-700
               prose-table:border-collapse prose-th:border prose-th:border-gray-600 prose-th:px-3 prose-th:py-2
               prose-td:border prose-td:border-gray-700 prose-td:px-3 prose-td:py-1.5
-              [&_.tiptap]:outline-none [&_.tiptap]:min-h-[300px]"
+              [&_.tiptap]:outline-none [&_.tiptap]:min-h-[300px]
+              [&_.comment-anchor-highlight]:bg-yellow-500/30 [&_.comment-anchor-highlight]:rounded-sm"
           />
         ) : (
           <textarea
+            ref={sourceTextareaRef}
             value={sourceText}
             onChange={(e) => handleSourceChange(e.target.value)}
+            onMouseUp={handleSourceSelection}
+            onKeyUp={handleSourceSelection}
             className="w-full h-full p-6 bg-gray-900 text-gray-100 font-mono text-sm resize-none outline-none border-none"
             spellCheck={false}
           />
         )}
       </div>
+      {selectionPopover && onCommentAnchor && (
+        <CommentSelectionPopover
+          top={selectionPopover.top}
+          left={selectionPopover.left}
+          onAddComment={() => {
+            onCommentAnchor(selectionPopover.anchor);
+            setSelectionPopover(null);
+          }}
+        />
+      )}
     </div>
   );
 }