idea-manager 0.1.2 → 0.3.0

package/src/components/brainstorm/Editor.tsx

@@ -13,7 +13,10 @@ interface Memo {
 interface EditorProps {
   projectId: string;
   onContentChange: (content: string) => void;
+  onSendMessage: (message: string) => void;
   memos?: Memo[];
+  chatLoading?: boolean;
+  onCollapse?: () => void;
 }
 
 interface PinPosition {
@@ -22,7 +25,7 @@ interface PinPosition {
   left: number;
 }
 
-export default function Editor({ projectId, onContentChange, memos = [] }: EditorProps) {
+export default function Editor({ projectId, onContentChange, onSendMessage, memos = [], chatLoading, onCollapse }: EditorProps) {
   const [content, setContent] = useState('');
   const [saving, setSaving] = useState(false);
   const [loaded, setLoaded] = useState(false);
@@ -122,9 +125,20 @@ export default function Editor({ projectId, onContentChange, memos = [] }: Edito
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-4 py-2 border-b border-border">
         <h2 className="text-sm font-medium text-muted-foreground">브레인스토밍</h2>
-        <span className="text-xs text-muted-foreground">
-          {saving ? '저장 중...' : content ? '저장됨' : ''}
-        </span>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">
+            {saving ? '저장 중...' : content ? '저장됨' : ''}
+          </span>
+          {onCollapse && (
+            <button
+              onClick={onCollapse}
+              className="text-muted-foreground hover:text-foreground transition-colors text-xs px-1"
+              title="접기 (B)"
+            >
+              «
+            </button>
+          )}
+        </div>
       </div>
       <div className="editor-container">
         <textarea
@@ -153,6 +167,8 @@ export default function Editor({ projectId, onContentChange, memos = [] }: Edito
                 anchorText={pin.memo.anchor_text}
                 top={pin.top}
                 left={pin.left}
+                loading={chatLoading}
+                onSendMessage={onSendMessage}
               />
             ))}
           </div>

package/src/components/brainstorm/MemoPin.tsx

@@ -1,31 +1,117 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
 interface MemoPinProps {
   question: string;
   anchorText: string;
   top: number;
   left: number;
+  loading?: boolean;
+  onSendMessage?: (message: string) => void;
 }
 
-export default function MemoPin({ question, anchorText, top, left }: MemoPinProps) {
+export default function MemoPin({ question, anchorText, top, left, loading, onSendMessage }: MemoPinProps) {
   const [showTooltip, setShowTooltip] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState('');
+  const [replies, setReplies] = useState<{ role: 'user' | 'assistant'; text: string }[]>([]);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Close popover on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  // Focus input when popover opens
+  useEffect(() => {
+    if (open) inputRef.current?.focus();
+  }, [open]);
+
+  const handleClick = () => {
+    setOpen(!open);
+    setShowTooltip(false);
+  };
+
+  const handleSubmit = () => {
+    const trimmed = input.trim();
+    if (!trimmed || loading) return;
+    setReplies(prev => [...prev, { role: 'user', text: trimmed }]);
+    setInput('');
+    onSendMessage?.(trimmed);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
 
   return (
     <div
+      ref={popoverRef}
       className="memo-pin"
       style={{ top: `${top}px`, left: `${left}px` }}
-      onMouseEnter={() => setShowTooltip(true)}
+      onMouseEnter={() => !open && setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
     >
-      <span className="memo-pin-icon">&#x1F4CC;</span>
-      {showTooltip && (
+      <span className="memo-pin-icon" onClick={handleClick}>&#x1F4CC;</span>
+
+      {/* Hover tooltip (only when popover is closed) */}
+      {showTooltip && !open && (
         <div className="memo-tooltip">
           <div className="memo-tooltip-anchor">&ldquo;{anchorText}&rdquo;</div>
           <div className="memo-tooltip-question">{question}</div>
         </div>
       )}
+
+      {/* Click popover with inline chat */}
+      {open && (
+        <div className="memo-popover">
+          <div className="memo-popover-anchor">&ldquo;{anchorText}&rdquo;</div>
+          <div className="memo-popover-messages">
+            <div className="memo-popover-bubble memo-popover-bubble-ai">{question}</div>
+            {replies.map((r, i) => (
+              <div key={i} className={`memo-popover-bubble memo-popover-bubble-${r.role === 'user' ? 'user' : 'ai'}`}>
+                {r.text}
+              </div>
+            ))}
+            {loading && (
+              <div className="memo-popover-bubble memo-popover-bubble-ai chat-loading">
+                <span className="dot" /><span className="dot" /><span className="dot" />
+              </div>
+            )}
+          </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>
+      )}
     </div>
   );
 }

package/src/components/dashboard/SubProjectCard.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import type { ISubProjectWithStats, TaskStatus } from '@/types';
+
+const STATUS_ICONS: Record<TaskStatus, string> = {
+  idea: '\u{1F4A1}',
+  writing: '\u{270F}\u{FE0F}',
+  submitted: '\u{1F680}',
+  testing: '\u{1F9EA}',
+  done: '\u{2705}',
+  problem: '\u{1F534}',
+};
+
+function timeAgo(dateStr: string | null): string {
+  if (!dateStr) return '';
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+export default function SubProjectCard({
+  subProject,
+  projectName,
+  onClick,
+}: {
+  subProject: ISubProjectWithStats;
+  projectName: string;
+  onClick: () => void;
+}) {
+  const { active_count, pending_count, done_count, problem_count, task_count, preview_tasks, last_activity } = subProject;
+
+  return (
+    <div
+      onClick={onClick}
+      className="p-4 bg-card hover:bg-card-hover border border-border rounded-xl
+                 cursor-pointer transition-all group hover:border-muted-foreground/30
+                 hover:shadow-md hover:shadow-black/20"
+    >
+      <div className="flex items-start justify-between mb-2">
+        <h3 className="text-sm font-semibold group-hover:text-primary transition-colors truncate flex-1">
+          {subProject.name}
+        </h3>
+        <span className="text-xs text-muted-foreground ml-2 flex-shrink-0">{projectName}</span>
+      </div>
+
+      {preview_tasks.length > 0 && (
+        <div className="space-y-1 mb-3">
+          {preview_tasks.map((t, i) => (
+            <div key={i} className="flex items-center gap-2 text-xs">
+              <span className="flex-shrink-0">{STATUS_ICONS[t.status]}</span>
+              <span className={`truncate ${t.status === 'done' ? 'text-muted-foreground line-through' : 'text-foreground'}`}>
+                {t.title}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between text-xs text-muted-foreground">
+        <div className="flex items-center gap-3">
+          {active_count > 0 && <span className="text-primary">active {active_count}</span>}
+          {pending_count > 0 && <span>pending {pending_count}</span>}
+          {done_count > 0 && <span className="text-success">done {done_count}</span>}
+          {problem_count > 0 && <span className="text-destructive">problem {problem_count}</span>}
+          {task_count === 0 && <span>no tasks</span>}
+        </div>
+        {last_activity && <span>{timeAgo(last_activity)}</span>}
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/TabBar.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export type DashboardTab = 'active' | 'all' | 'today';
+
+const TABS: { key: DashboardTab; label: string }[] = [
+  { key: 'active', label: 'Active' },
+  { key: 'all', label: 'All' },
+  { key: 'today', label: 'Today' },
+];
+
+export default function TabBar({
+  value,
+  onChange,
+}: {
+  value: DashboardTab;
+  onChange: (tab: DashboardTab) => void;
+}) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="flex gap-1 bg-muted rounded-lg p-1">
+      {TABS.map((tab) => (
+        <button
+          key={tab.key}
+          onClick={() => onChange(tab.key)}
+          className={`px-4 py-1.5 text-sm rounded-md transition-all ${
+            value === tab.key
+              ? 'bg-card text-foreground shadow-sm font-medium'
+              : 'text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/task/ProjectTree.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import { useState } from 'react';
+import type { ITask, ISubProjectWithStats, TaskStatus } from '@/types';
+import { statusIcon } from './StatusFlow';
+
+const PRIORITY_COLORS: Record<string, string> = {
+  high: 'bg-destructive',
+  medium: 'bg-warning',
+  low: 'bg-muted-foreground',
+};
+
+export default function ProjectTree({
+  subProjects,
+  tasks,
+  selectedSubId,
+  selectedTaskId,
+  onSelectSub,
+  onSelectTask,
+  onCreateSub,
+  onDeleteSub,
+  onCreateTask,
+  onStatusChange,
+  onTodayToggle,
+}: {
+  subProjects: ISubProjectWithStats[];
+  tasks: ITask[];
+  selectedSubId: string | null;
+  selectedTaskId: string | null;
+  onSelectSub: (subId: string) => void;
+  onSelectTask: (taskId: string) => void;
+  onCreateSub: () => void;
+  onDeleteSub: (subId: string) => void;
+  onCreateTask: (title: string) => void;
+  onStatusChange: (taskId: string, status: TaskStatus) => void;
+  onTodayToggle: (taskId: string, isToday: boolean) => void;
+}) {
+  const [collapsedSubs, setCollapsedSubs] = useState<Set<string>>(new Set());
+  const [addingTaskFor, setAddingTaskFor] = useState<string | null>(null);
+  const [newTaskTitle, setNewTaskTitle] = useState('');
+
+  const toggleCollapse = (subId: string) => {
+    setCollapsedSubs(prev => {
+      const next = new Set(prev);
+      if (next.has(subId)) next.delete(subId);
+      else next.add(subId);
+      return next;
+    });
+  };
+
+  const handleAddTask = (subId: string) => {
+    const title = newTaskTitle.trim();
+    if (!title) return;
+    onSelectSub(subId);
+    onCreateTask(title);
+    setNewTaskTitle('');
+    setAddingTaskFor(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border flex-shrink-0">
+        <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Projects</h2>
+        <button
+          onClick={onCreateSub}
+          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+          title="Add sub-project (N)"
+        >
+          + <span className="text-muted-foreground/50">N</span>
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto py-1">
+        {subProjects.length === 0 && (
+          <div className="text-center py-8 text-muted-foreground text-xs">
+            Create a sub-project to get started
+          </div>
+        )}
+
+        {subProjects.map((sp) => {
+          const isSelected = selectedSubId === sp.id;
+          const isCollapsed = collapsedSubs.has(sp.id);
+          const subTasks = isSelected ? tasks : [];
+
+          return (
+            <div key={sp.id} className="mb-0.5">
+              {/* Sub-project node */}
+              <div
+                onClick={() => {
+                  onSelectSub(sp.id);
+                  if (isCollapsed) toggleCollapse(sp.id);
+                }}
+                className={`flex items-center gap-1.5 px-2 py-1.5 cursor-pointer transition-colors group text-sm ${
+                  isSelected
+                    ? 'text-foreground'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                <button
+                  onClick={(e) => { e.stopPropagation(); toggleCollapse(sp.id); }}
+                  className="w-4 h-4 flex items-center justify-center text-xs text-muted-foreground flex-shrink-0"
+                >
+                  {isCollapsed ? '\u25B6' : '\u25BC'}
+                </button>
+                <span className={`flex-1 truncate font-medium ${isSelected ? 'text-primary' : ''}`}>
+                  {sp.name}
+                </span>
+                <div className="flex items-center gap-1.5">
+                  {sp.task_count > 0 && (
+                    <span className="text-xs text-muted-foreground tabular-nums">{sp.task_count}</span>
+                  )}
+                  <button
+                    onClick={(e) => { e.stopPropagation(); onDeleteSub(sp.id); }}
+                    className="text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity text-xs"
+                  >
+                    x
+                  </button>
+                </div>
+              </div>
+
+              {/* Tasks (children) */}
+              {!isCollapsed && isSelected && (
+                <div className="ml-3 border-l border-border/50">
+                  {subTasks.length === 0 && !addingTaskFor && (
+                    <div className="text-xs text-muted-foreground py-2 pl-4">
+                      No tasks
+                    </div>
+                  )}
+                  {subTasks.map((task) => (
+                    <div
+                      key={task.id}
+                      onClick={() => onSelectTask(task.id)}
+                      className={`flex items-center gap-1.5 pl-4 pr-2 py-1.5 cursor-pointer transition-colors text-sm border-l-2 ${
+                        selectedTaskId === task.id
+                          ? 'bg-card-hover border-l-primary'
+                          : 'border-l-transparent hover:bg-card-hover/50'
+                      }`}
+                    >
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          const nextStatus = getNextStatus(task.status);
+                          onStatusChange(task.id, nextStatus);
+                        }}
+                        className="flex-shrink-0 text-sm"
+                        title={`Status: ${task.status}`}
+                      >
+                        {statusIcon(task.status)}
+                      </button>
+                      <span className={`tree-priority-dot ${PRIORITY_COLORS[task.priority]}`} />
+                      <span className={`flex-1 truncate ${task.status === 'done' ? 'text-muted-foreground line-through' : ''}`}>
+                        {task.title}
+                      </span>
+                      {task.is_today && (
+                        <button
+                          onClick={(e) => { e.stopPropagation(); onTodayToggle(task.id, false); }}
+                          className="text-xs flex-shrink-0 text-primary" title="Remove from today"
+                        >
+                          *
+                        </button>
+                      )}
+                    </div>
+                  ))}
+
+                  {/* Add task input */}
+                  {addingTaskFor === sp.id ? (
+                    <div className="pl-4 pr-2 py-1">
+                      <input
+                        type="text"
+                        value={newTaskTitle}
+                        onChange={(e) => setNewTaskTitle(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') handleAddTask(sp.id);
+                          if (e.key === 'Escape') { setNewTaskTitle(''); setAddingTaskFor(null); }
+                        }}
+                        placeholder="Task title..."
+                        className="w-full bg-input border border-border rounded px-2 py-1 text-sm
+                                   focus:border-primary focus:outline-none text-foreground"
+                        autoFocus
+                      />
+                    </div>
+                  ) : (
+                    <button
+                      data-add-task
+                      onClick={() => { onSelectSub(sp.id); setAddingTaskFor(sp.id); }}
+                      className="pl-4 pr-2 py-1 text-xs text-muted-foreground hover:text-foreground
+                                 transition-colors text-left w-full"
+                    >
+                      + Add task <span className="text-muted-foreground/50 ml-1">T</span>
+                    </button>
+                  )}
+                </div>
+              )}
+
+              {/* Show task previews for non-selected sub-projects */}
+              {!isCollapsed && !isSelected && sp.preview_tasks && sp.preview_tasks.length > 0 && (
+                <div className="ml-3 border-l border-border/50">
+                  {sp.preview_tasks.map((pt, i) => (
+                    <div
+                      key={i}
+                      onClick={() => onSelectSub(sp.id)}
+                      className="flex items-center gap-1.5 pl-4 pr-2 py-1 cursor-pointer text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      <span className="flex-shrink-0">{statusIcon(pt.status)}</span>
+                      <span className="truncate">{pt.title}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function getNextStatus(current: TaskStatus): TaskStatus {
+  const flow: TaskStatus[] = ['idea', 'writing', 'submitted', 'testing', 'done'];
+  const idx = flow.indexOf(current);
+  if (idx === -1) return 'idea';
+  return flow[(idx + 1) % flow.length];
+}

package/src/components/task/PromptEditor.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+export default function PromptEditor({
+  content,
+  onSave,
+  onRefine,
+  refining,
+}: {
+  content: string;
+  onSave: (content: string) => void;
+  onRefine?: () => void;
+  refining?: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(content);
+  const [copied, setCopied] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    setDraft(content);
+  }, [content]);
+
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+    }
+  }, [editing]);
+
+  const handleSave = () => {
+    onSave(draft);
+    setEditing(false);
+  };
+
+  const handleCopy = async () => {
+    if (!content) return;
+    await navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Prompt</h4>
+        <div className="flex items-center gap-1.5">
+          {onRefine && (
+            <button
+              onClick={onRefine}
+              disabled={refining}
+              className="prompt-action-btn prompt-generate-btn"
+            >
+              {refining ? 'Refining...' : 'AI Refine'}
+            </button>
+          )}
+          {!editing && content && (
+            <button onClick={handleCopy} className="prompt-action-btn">
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+          )}
+          {!editing ? (
+            <button onClick={() => setEditing(true)} className="prompt-action-btn">
+              Edit
+            </button>
+          ) : (
+            <>
+              <button onClick={() => { setDraft(content); setEditing(false); }} className="prompt-action-btn">
+                Cancel
+              </button>
+              <button onClick={handleSave} className="prompt-action-btn" style={{ color: 'hsl(var(--success))' }}>
+                Save
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {editing ? (
+        <textarea
+          ref={textareaRef}
+          value={draft}
+          onChange={(e) => {
+            setDraft(e.target.value);
+            e.target.style.height = 'auto';
+            e.target.style.height = e.target.scrollHeight + 'px';
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') { setDraft(content); setEditing(false); }
+            if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') handleSave();
+          }}
+          className="prompt-edit-textarea"
+          rows={4}
+          placeholder="Write your prompt here..."
+        />
+      ) : content ? (
+        <div className="prompt-content text-sm">{content}</div>
+      ) : (
+        <div className="text-sm text-muted-foreground italic py-6 text-center border border-dashed border-border rounded-lg">
+          No prompt yet. Click Edit to write one.
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/task/StatusFlow.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { TaskStatus } from '@/types';
+
+const STATUSES: { key: TaskStatus; label: string; icon: string; color: string }[] = [
+  { key: 'idea', label: 'Idea', icon: '\u{1F4A1}', color: 'text-muted-foreground' },
+  { key: 'writing', label: 'Writing', icon: '\u{270F}\u{FE0F}', color: 'text-warning' },
+  { key: 'submitted', label: 'Submitted', icon: '\u{1F680}', color: 'text-primary' },
+  { key: 'testing', label: 'Testing', icon: '\u{1F9EA}', color: 'text-accent' },
+  { key: 'done', label: 'Done', icon: '\u{2705}', color: 'text-success' },
+  { key: 'problem', label: 'Problem', icon: '\u{1F534}', color: 'text-destructive' },
+];
+
+export default function StatusFlow({
+  status,
+  onChange,
+}: {
+  status: TaskStatus;
+  onChange: (status: TaskStatus) => void;
+}) {
+  return (
+    <div className="flex items-center gap-1">
+      {STATUSES.map((s) => (
+        <button
+          key={s.key}
+          onClick={() => onChange(s.key)}
+          title={s.label}
+          className={`px-2 py-1 rounded text-base transition-all ${
+            status === s.key
+              ? `${s.color} bg-muted scale-110`
+              : 'opacity-40 hover:opacity-80'
+          }`}
+        >
+          {s.icon}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function statusIcon(status: TaskStatus): string {
+  return STATUSES.find(s => s.key === status)?.icon ?? '';
+}