idea-manager 0.2.0 → 0.3.0

package/src/components/tree/RefinePopover.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface IItemTree {
+  id: string;
+  title: string;
+  description: string;
+  item_type: string;
+  priority: string;
+  status: string;
+  is_locked: boolean;
+  is_pinned: boolean;
+  children: IItemTree[];
+}
+
+interface RefinePopoverProps {
+  itemId: string;
+  projectId: string;
+  title: string;
+  description: string;
+  onClose: () => void;
+  onItemUpdate: (itemId: string, data: Record<string, unknown>) => void;
+  onTreeRefresh: (tree: IItemTree[]) => void;
+}
+
+export default function RefinePopover({
+  itemId,
+  projectId,
+  title,
+  description,
+  onClose,
+  onItemUpdate,
+  onTreeRefresh,
+}: RefinePopoverProps) {
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [messages, setMessages] = useState<{ role: 'user' | 'assistant'; text: string }[]>([]);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const handleSubmit = async () => {
+    const trimmed = input.trim();
+    if (!trimmed || loading) return;
+
+    setMessages(prev => [...prev, { role: 'user', text: trimmed }]);
+    setInput('');
+    setLoading(true);
+
+    try {
+      const res = await fetch(`/api/projects/${projectId}/items/${itemId}/refine`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: trimmed }),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setMessages(prev => [
+          ...prev,
+          { role: 'assistant', text: `"${data.title}"\n${data.description}` },
+        ]);
+        // Refresh the entire tree if structural changes were made
+        if (data.tree) {
+          onTreeRefresh(data.tree);
+        } else {
+          onItemUpdate(itemId, { title: data.title, description: data.description });
+        }
+      } else {
+        const data = await res.json();
+        setMessages(prev => [
+          ...prev,
+          { role: 'assistant', text: `오류: ${data.error || '다듬기에 실패했습니다'}` },
+        ]);
+      }
+    } catch {
+      setMessages(prev => [
+        ...prev,
+        { role: 'assistant', text: '오류: AI 연결에 실패했습니다' },
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="refine-popover">
+      <div className="refine-header">
+        <span className="text-xs font-medium">다듬기: {title}</span>
+        <button onClick={onClose} className="refine-close">&times;</button>
+      </div>
+
+      {description && (
+        <div className="refine-context">{description}</div>
+      )}
+
+      <div className="refine-messages">
+        {messages.length === 0 && (
+          <div className="text-xs text-muted-foreground text-center py-2">
+            이 항목을 어떻게 다듬을지 알려주세요
+          </div>
+        )}
+        {messages.map((m, i) => (
+          <div key={i} className={`memo-popover-bubble memo-popover-bubble-${m.role === 'user' ? 'user' : 'ai'}`}>
+            {m.text.split('\n').map((line, j) => (
+              <p key={j} className={j > 0 ? 'mt-1' : ''}>{line}</p>
+            ))}
+          </div>
+        ))}
+        {loading && (
+          <div className="memo-popover-bubble memo-popover-bubble-ai chat-loading">
+            <span className="dot" /><span className="dot" /><span className="dot" />
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="memo-popover-input-area">
+        <textarea
+          ref={inputRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="예: 하위 항목을 상세하게 추가해줘, 범위를 줄여줘..."
+          rows={1}
+          disabled={loading}
+          className="memo-popover-input"
+        />
+        <button
+          onClick={handleSubmit}
+          disabled={!input.trim() || loading}
+          className="memo-popover-send"
+        >
+          전송
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/tree/TreeNode.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import LockToggle from './LockToggle';
 import StatusBadge from './StatusBadge';
 import ItemDetail from './ItemDetail';
+import RefinePopover from './RefinePopover';
 
 interface IItemTree {
   id: string;
@@ -14,6 +15,7 @@ interface IItemTree {
   priority: string;
   status: string;
   is_locked: boolean;
+  is_pinned: boolean;
   children: IItemTree[];
 }
 
@@ -22,70 +24,171 @@ interface TreeNodeProps {
   depth: number;
   projectId: string;
   onItemUpdate: (itemId: string, data: Record<string, unknown>) => void;
+  onItemDelete: (itemId: string) => void;
+  onTreeRefresh: (tree: IItemTree[]) => void;
+  selectMode?: boolean;
+  selected?: Set<string>;
+  onToggleSelect?: (id: string) => void;
+  defaultExpanded?: boolean;
 }
 
-const typeIcons: Record<string, string> = {
-  feature: '\u{1F4E6}',
-  task: '\u{2705}',
-  bug: '\u{1F41B}',
-  idea: '\u{1F4A1}',
-  note: '\u{1F4DD}',
+const typeConfig: Record<string, { icon: string; color: string; label: string }> = {
+  feature: { icon: '\u{1F4E6}', color: 'var(--primary)', label: '기능' },
+  task:    { icon: '\u{2705}', color: 'var(--success)', label: '작업' },
+  bug:     { icon: '\u{1F41B}', color: 'var(--destructive)', label: '버그' },
+  idea:    { icon: '\u{1F4A1}', color: 'var(--warning)', label: '아이디어' },
+  note:    { icon: '\u{1F4DD}', color: 'var(--muted-foreground)', label: '메모' },
 };
 
-const priorityColors: Record<string, string> = {
-  high: 'text-destructive',
-  medium: 'text-warning',
-  low: 'text-success',
-};
+function countDescendantStatus(item: IItemTree): { total: number; done: number } {
+  let total = 0;
+  let done = 0;
+  for (const child of item.children) {
+    total++;
+    if (child.status === 'done') done++;
+    const sub = countDescendantStatus(child);
+    total += sub.total;
+    done += sub.done;
+  }
+  return { total, done };
+}
 
-export default function TreeNode({ item, depth, projectId, onItemUpdate }: TreeNodeProps) {
-  const [expanded, setExpanded] = useState(true);
+export default function TreeNode({ item, depth, projectId, onItemUpdate, onItemDelete, onTreeRefresh, selectMode, selected, onToggleSelect, defaultExpanded }: TreeNodeProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded ?? depth < 2);
   const [showDetail, setShowDetail] = useState(false);
+  const [showRefine, setShowRefine] = useState(false);
   const hasChildren = item.children.length > 0;
+  const baseCfg = typeConfig[item.item_type] || typeConfig.note;
+  const cfg = item.status === 'done'
+    ? { icon: '\u{2705}', color: 'var(--success)', label: baseCfg.label }
+    : item.status === 'in_progress'
+      ? { ...baseCfg, color: 'var(--primary)' }
+      : baseCfg;
+  const childStats = hasChildren ? countDescendantStatus(item) : null;
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onItemDelete(item.id);
+  };
+
+  const handlePinToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onItemUpdate(item.id, { is_pinned: !item.is_pinned });
+  };
+
+  const handleRefineToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowRefine(!showRefine);
+  };
+
+  const isDone = item.status === 'done';
 
   return (
     <div className="select-none">
       <div
-        className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-card-hover
-                   cursor-pointer transition-colors group"
-        style={{ paddingLeft: `${depth * 20 + 8}px` }}
-        onClick={() => setShowDetail(!showDetail)}
+        className={`tree-node-row group ${isDone ? 'opacity-50' : ''}`}
+        style={{
+          paddingLeft: `${depth * 20 + 8}px`,
+          borderLeft: depth === 0 ? `3px solid hsl(${cfg.color})` : undefined,
+        }}
+        onClick={() => selectMode ? onToggleSelect?.(item.id) : setShowDetail(!showDetail)}
       >
+        {selectMode && (
+          <input
+            type="checkbox"
+            checked={selected?.has(item.id) ?? false}
+            onChange={() => onToggleSelect?.(item.id)}
+            onClick={(e) => e.stopPropagation()}
+            className="w-3.5 h-3.5 flex-shrink-0 accent-accent"
+          />
+        )}
+
         {hasChildren ? (
           <button
             onClick={(e) => {
               e.stopPropagation();
               setExpanded(!expanded);
             }}
-            className="text-muted-foreground hover:text-foreground text-xs w-4 flex-shrink-0"
+            className="text-muted-foreground hover:text-foreground text-[10px] w-4 flex-shrink-0 transition-transform"
+            style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
           >
-            {expanded ? '\u25BC' : '\u25B6'}
+            ▼
           </button>
         ) : (
-          <span className="w-4 flex-shrink-0" />
+          <span className="w-4 flex-shrink-0 text-center text-muted-foreground/30 text-[10px]">·</span>
         )}
 
-        <LockToggle
-          isLocked={item.is_locked}
-          onToggle={(locked) => onItemUpdate(item.id, { is_locked: locked })}
-        />
-
-        <span className="text-sm flex-shrink-0">
-          {typeIcons[item.item_type] || '\u{1F4CB}'}
-        </span>
-
-        <span className="text-sm flex-1 truncate">{item.title}</span>
+        {/* Main content area */}
+        <div className="flex-1 min-w-0 py-0.5">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm flex-shrink-0">{cfg.icon}</span>
+            <span className={`text-sm truncate ${isDone ? 'line-through' : ''}`}>
+              {item.title}
+            </span>
+            {item.is_pinned && (
+              <span className="text-[10px] flex-shrink-0" title="고정됨">📌</span>
+            )}
+            {/* Child progress */}
+            {childStats && childStats.total > 0 && (
+              <span className="tree-progress-badge flex-shrink-0">
+                {childStats.done}/{childStats.total}
+              </span>
+            )}
+          </div>
+          {/* Description subtitle */}
+          {item.description && !showDetail && (
+            <p className="text-[11px] text-muted-foreground/50 truncate mt-0.5 leading-tight">
+              {item.description}
+            </p>
+          )}
+        </div>
 
-        <span className={`text-xs flex-shrink-0 ${priorityColors[item.priority] || ''}`}>
-          {item.priority === 'high' ? '\u{1F534}' : item.priority === 'medium' ? '\u{1F7E1}' : '\u{1F7E2}'}
-        </span>
+        {/* Right side controls */}
+        <div className="flex items-center gap-1 flex-shrink-0">
+          {/* Hover actions */}
+          <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+            <LockToggle
+              isLocked={item.is_locked}
+              onToggle={(locked) => onItemUpdate(item.id, { is_locked: locked })}
+            />
+            <button onClick={handlePinToggle} className="tree-icon-btn" title={item.is_pinned ? '고정 해제' : '고정'}>
+              {item.is_pinned ? '📌' : '📍'}
+            </button>
+            <button onClick={handleRefineToggle} className="tree-action-btn" title="다듬기">
+              다듬기
+            </button>
+            <button onClick={handleDelete} className="tree-action-btn tree-action-btn-danger" title="삭제">
+              ✕
+            </button>
+          </div>
 
-        <StatusBadge
-          status={item.status}
-          onStatusChange={(status) => onItemUpdate(item.id, { status })}
-        />
+          {/* Always visible: priority + status */}
+          <span className="tree-priority-dot" style={{
+            background: item.priority === 'high' ? 'hsl(var(--destructive))'
+              : item.priority === 'medium' ? 'hsl(var(--warning))'
+              : 'hsl(var(--success))'
+          }} title={item.priority} />
+          <StatusBadge
+            status={item.status}
+            onStatusChange={(status) => onItemUpdate(item.id, { status })}
+          />
+        </div>
       </div>
 
+      {showRefine && (
+        <div style={{ marginLeft: `${depth * 20 + 28}px` }}>
+          <RefinePopover
+            itemId={item.id}
+            projectId={projectId}
+            title={item.title}
+            description={item.description}
+            onClose={() => setShowRefine(false)}
+            onItemUpdate={onItemUpdate}
+            onTreeRefresh={onTreeRefresh}
+          />
+        </div>
+      )}
+
       {showDetail && (
         <ItemDetail
           itemId={item.id}
@@ -101,7 +204,7 @@ export default function TreeNode({ item, depth, projectId, onItemUpdate }: TreeN
       )}
 
       {expanded && hasChildren && (
-        <div>
+        <div className={depth === 0 ? 'tree-children-group' : ''}>
           {item.children.map((child) => (
             <TreeNode
               key={child.id}
@@ -109,6 +212,12 @@ export default function TreeNode({ item, depth, projectId, onItemUpdate }: TreeN
               depth={depth + 1}
               projectId={projectId}
               onItemUpdate={onItemUpdate}
+              onItemDelete={onItemDelete}
+              onTreeRefresh={onTreeRefresh}
+              selectMode={selectMode}
+              selected={selected}
+              onToggleSelect={onToggleSelect}
+              defaultExpanded={defaultExpanded}
             />
           ))}
         </div>