@assistkick/create 1.7.0 → 1.9.0

package/templates/assistkick-product-system/packages/frontend/src/components/IterationCommentModal.tsx

@@ -0,0 +1,80 @@
+/**
+ * Iteration Comment Modal — prompts for feedback when moving a card backward.
+ */
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+
+interface IterationCommentModalProps {
+  isOpen: boolean;
+  featureName: string;
+  fromColumn: string;
+  toColumn: string;
+  onConfirm: (comment: string) => void;
+  onCancel: () => void;
+}
+
+export function IterationCommentModal({ isOpen, featureName, fromColumn, toColumn, onConfirm, onCancel }: IterationCommentModalProps) {
+  const [comment, setComment] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setComment('');
+      setTimeout(() => textareaRef.current?.focus(), 50);
+    }
+  }, [isOpen]);
+
+  const handleSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    onConfirm(comment.trim());
+  }, [comment, onConfirm]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[1000]" onClick={onCancel}>
+      <div className="bg-surface border border-edge rounded-xl p-6 w-[440px] max-w-[90vw] shadow-[0_8px_32px_rgba(0,0,0,0.3)]" onClick={e => e.stopPropagation()}>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="m-0 text-lg text-content">Move Card Backward</h2>
+          <button className="bg-none border-none text-[22px] text-content-secondary cursor-pointer px-1 leading-none hover:text-content" onClick={onCancel} type="button">&times;</button>
+        </div>
+
+        <p className="text-[13px] text-content-secondary mb-3">
+          Moving <span className="font-semibold text-content">{featureName}</span> from <span className="font-mono text-accent">{fromColumn}</span> back to <span className="font-mono text-accent">{toColumn}</span>.
+        </p>
+
+        <form onSubmit={handleSubmit} noValidate>
+          <div className="flex flex-col gap-1">
+            <label className="font-mono text-[11px] font-semibold text-content-secondary uppercase tracking-wider" htmlFor="iteration-comment">
+              What needs to change? (optional)
+            </label>
+            <textarea
+              ref={textareaRef}
+              id="iteration-comment"
+              className="w-full h-24 px-2.5 py-2 bg-surface-raised border border-edge rounded text-content font-mono text-[13px] outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted resize-y"
+              value={comment}
+              onChange={e => setComment(e.target.value)}
+              placeholder="Describe what should be revised..."
+            />
+          </div>
+
+          <div className="flex gap-2 mt-4">
+            <button
+              className="flex-1 h-9 bg-transparent border border-edge rounded text-content-secondary font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:bg-surface-raised"
+              type="button"
+              onClick={onCancel}
+            >
+              Cancel
+            </button>
+            <button
+              className="flex-1 h-9 bg-transparent border border-accent rounded text-accent font-mono text-[13px] cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white"
+              type="submit"
+            >
+              Move
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}