idea-manager 0.1.2 → 0.3.0

package/src/app/projects/[id]/page.tsx

@@ -1,249 +1,432 @@
 'use client';
 
-import { useState, useEffect, useCallback, useRef, use } from 'react';
-import { useRouter } from 'next/navigation';
+import { useState, useEffect, useCallback, useRef, use, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import Editor from '@/components/brainstorm/Editor';
-import TreeView from '@/components/tree/TreeView';
-import ChatPanel from '@/components/chat/ChatPanel';
-import ResizeHandle from '@/components/brainstorm/ResizeHandle';
+import ProjectTree from '@/components/task/ProjectTree';
+import TaskDetail from '@/components/task/TaskDetail';
+import DirectoryPicker from '@/components/DirectoryPicker';
+import ConfirmDialog from '@/components/ui/ConfirmDialog';
+import type { ISubProject, ITask, TaskStatus, ISubProjectWithStats } from '@/types';
 
 interface IProject {
   id: string;
   name: string;
   description: string;
+  project_path: string | null;
 }
 
-interface IItemTree {
-  id: string;
-  title: string;
-  description: string;
-  item_type: string;
-  priority: string;
-  status: string;
-  is_locked: boolean;
-  children: IItemTree[];
-}
+function WorkspaceInner({ id }: { id: string }) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const initialUrlSub = useRef(searchParams.get('sub'));
+  const initialUrlTask = useRef(searchParams.get('task'));
 
-interface IMessage {
-  id: string;
-  role: 'assistant' | 'user';
-  content: string;
-  created_at: string;
-}
+  const [project, setProject] = useState<IProject | null>(null);
+  const [subProjects, setSubProjects] = useState<ISubProjectWithStats[]>([]);
+  const [selectedSubId, setSelectedSubId] = useState<string | null>(null);
+  const [tasks, setTasks] = useState<ITask[]>([]);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const [showDirPicker, setShowDirPicker] = useState(false);
+  const [confirmAction, setConfirmAction] = useState<{ type: 'delete-sub' | 'delete-task'; id: string } | null>(null);
+  const [showAddSub, setShowAddSub] = useState(false);
+  const [showBrainstorm, setShowBrainstorm] = useState(true);
+  const [newSubName, setNewSubName] = useState('');
 
-interface IMemo {
-  id: string;
-  anchor_text: string;
-  question: string;
-  is_resolved: boolean;
-}
+  // Resizable panel widths
+  const [leftWidth, setLeftWidth] = useState(280);
+  const [centerWidth, setCenterWidth] = useState(280);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const draggingRef = useRef<'left' | 'center' | null>(null);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
 
-export default function ProjectWorkspace({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = use(params);
-  const router = useRouter();
-  const [project, setProject] = useState<IProject | null>(null);
-  const [items, setItems] = useState<IItemTree[]>([]);
-  const [messages, setMessages] = useState<IMessage[]>([]);
-  const [memos, setMemos] = useState<IMemo[]>([]);
-  const [structuring, setStructuring] = useState(false);
-  const [chatLoading, setChatLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [editorPercent, setEditorPercent] = useState(60);
-  const leftPanelRef = useRef<HTMLDivElement>(null);
+  const handleMouseDown = useCallback((panel: 'left' | 'center', e: React.MouseEvent) => {
+    e.preventDefault();
+    draggingRef.current = panel;
+    startXRef.current = e.clientX;
+    startWidthRef.current = panel === 'left' ? leftWidth : centerWidth;
+  }, [leftWidth, centerWidth]);
 
   useEffect(() => {
-    const loadProject = async () => {
-      const res = await fetch(`/api/projects/${id}`);
-      if (!res.ok) {
-        router.push('/');
-        return;
-      }
-      setProject(await res.json());
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!draggingRef.current) return;
+      const delta = e.clientX - startXRef.current;
+      const newWidth = Math.max(180, Math.min(500, startWidthRef.current + delta));
+      if (draggingRef.current === 'left') setLeftWidth(newWidth);
+      else setCenterWidth(newWidth);
     };
-
-    const loadItems = async () => {
-      const res = await fetch(`/api/projects/${id}/items`);
-      if (res.ok) {
-        setItems(await res.json());
-      }
+    const handleMouseUp = () => { draggingRef.current = null; };
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
     };
+  }, []);
 
-    const loadConversations = async () => {
-      const res = await fetch(`/api/projects/${id}/conversations`);
-      if (res.ok) {
-        setMessages(await res.json());
-      }
-    };
+  // Load project
+  useEffect(() => {
+    fetch(`/api/projects/${id}`)
+      .then(r => { if (!r.ok) { router.push('/'); return null; } return r.json(); })
+      .then(data => data && setProject(data));
+  }, [id, router]);
 
-    const loadMemos = async () => {
-      const res = await fetch(`/api/projects/${id}/memos?unresolved=true`);
-      if (res.ok) {
-        setMemos(await res.json());
+  // Load sub-projects (stable callback, no deps on selection state)
+  const loadSubProjects = useCallback(async () => {
+    const res = await fetch(`/api/projects/${id}/sub-projects`);
+    if (!res.ok) return;
+    const data: ISubProjectWithStats[] = await res.json();
+    setSubProjects(data);
+    return data;
+  }, [id]);
+
+  // Initial load: sub-projects + auto-select from URL
+  useEffect(() => {
+    loadSubProjects().then(data => {
+      if (!data || data.length === 0) return;
+      const urlSub = initialUrlSub.current;
+      if (urlSub && data.some(s => s.id === urlSub)) {
+        setSelectedSubId(urlSub);
+      } else {
+        setSelectedSubId(data[0].id);
       }
-    };
+    });
+  }, [loadSubProjects]);
 
-    loadProject();
-    loadItems();
-    loadConversations();
-    loadMemos();
-  }, [id, router]);
+  // Load tasks when sub-project changes
+  useEffect(() => {
+    if (!selectedSubId) { setTasks([]); return; }
+    fetch(`/api/projects/${id}/sub-projects/${selectedSubId}/tasks`)
+      .then(r => r.json())
+      .then((data: ITask[]) => {
+        setTasks(data);
+        // Auto-select from URL on first load only
+        const urlTask = initialUrlTask.current;
+        if (urlTask && data.some(t => t.id === urlTask)) {
+          setSelectedTaskId(urlTask);
+          initialUrlTask.current = null; // consume once
+        }
+      });
+  }, [id, selectedSubId]);
 
-  const handleStructure = useCallback(async (_content: string) => {
-    setStructuring(true);
-    setError(null);
+  const selectedTask = tasks.find(t => t.id === selectedTaskId) ?? null;
 
-    try {
-      const res = await fetch(`/api/projects/${id}/structure`, {
-        method: 'POST',
-      });
+  const handleCreateSubProject = async () => {
+    if (!newSubName.trim()) return;
+    const res = await fetch(`/api/projects/${id}/sub-projects`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: newSubName.trim() }),
+    });
+    if (res.ok) {
+      const sp: ISubProject = await res.json();
+      setNewSubName('');
+      setShowAddSub(false);
+      await loadSubProjects();
+      setSelectedSubId(sp.id);
+    }
+  };
 
-      if (res.ok) {
-        const data = await res.json();
-        setItems(data.items);
-        if (data.message) {
-          setMessages(prev => [...prev, data.message]);
-        }
-        if (data.memos) {
-          setMemos(data.memos);
-        }
-      } else {
-        const data = await res.json();
-        setError(data.error || '구조화에 실패했습니다');
-      }
-    } catch {
-      setError('AI 연결에 실패했습니다');
-    } finally {
-      setStructuring(false);
+  const handleDeleteSubProject = (subId: string) => {
+    setConfirmAction({ type: 'delete-sub', id: subId });
+  };
+
+  const handleCreateTask = async (title: string) => {
+    if (!selectedSubId) return;
+    const res = await fetch(`/api/projects/${id}/sub-projects/${selectedSubId}/tasks`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ title }),
+    });
+    if (res.ok) {
+      const task: ITask = await res.json();
+      setTasks(prev => [...prev, task]);
+      setSelectedTaskId(task.id);
+      loadSubProjects();
     }
-  }, [id]);
+  };
 
-  const handleItemUpdate = useCallback(async (itemId: string, data: Record<string, unknown>) => {
-    try {
-      const res = await fetch(`/api/projects/${id}/items/${itemId}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      });
+  const handleTaskStatusChange = async (taskId: string, status: TaskStatus) => {
+    const res = await fetch(`/api/projects/${id}/sub-projects/${selectedSubId}/tasks/${taskId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ status }),
+    });
+    if (res.ok) {
+      const updated: ITask = await res.json();
+      setTasks(prev => prev.map(t => t.id === taskId ? updated : t));
+      loadSubProjects();
+    }
+  };
 
-      if (res.ok) {
-        // Reload items tree to reflect changes (including cascaded lock)
-        const itemsRes = await fetch(`/api/projects/${id}/items`);
-        if (itemsRes.ok) {
-          setItems(await itemsRes.json());
-        }
+  const handleTaskTodayToggle = async (taskId: string, isToday: boolean) => {
+    const res = await fetch(`/api/projects/${id}/sub-projects/${selectedSubId}/tasks/${taskId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ is_today: isToday }),
+    });
+    if (res.ok) {
+      const updated: ITask = await res.json();
+      setTasks(prev => prev.map(t => t.id === taskId ? updated : t));
+    }
+  };
+
+  const handleTaskUpdate = async (data: Partial<ITask>) => {
+    if (!selectedTaskId || !selectedSubId) return;
+    const res = await fetch(`/api/projects/${id}/sub-projects/${selectedSubId}/tasks/${selectedTaskId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    if (res.ok) {
+      const updated: ITask = await res.json();
+      setTasks(prev => prev.map(t => t.id === selectedTaskId ? updated : t));
+      loadSubProjects();
+    }
+  };
+
+  const handleTaskDelete = () => {
+    if (!selectedTaskId) return;
+    setConfirmAction({ type: 'delete-task', id: selectedTaskId });
+  };
+
+  const handleConfirmAction = async () => {
+    if (!confirmAction) return;
+    if (confirmAction.type === 'delete-sub') {
+      await fetch(`/api/projects/${id}/sub-projects/${confirmAction.id}`, { method: 'DELETE' });
+      if (selectedSubId === confirmAction.id) {
+        setSelectedSubId(null);
+        setSelectedTaskId(null);
       }
-    } catch {
-      setError('항목 업데이트에 실패했습니다');
+      loadSubProjects();
+    } else if (confirmAction.type === 'delete-task') {
+      await fetch(`/api/projects/${id}/sub-projects/${selectedSubId}/tasks/${confirmAction.id}`, { method: 'DELETE' });
+      setTasks(prev => prev.filter(t => t.id !== confirmAction.id));
+      if (selectedTaskId === confirmAction.id) setSelectedTaskId(null);
+      loadSubProjects();
     }
-  }, [id]);
+    setConfirmAction(null);
+  };
 
-  const handleSendMessage = useCallback(async (message: string) => {
-    setChatLoading(true);
-    setError(null);
+  const handleSetPath = async (selectedPath: string) => {
+    const res = await fetch(`/api/projects/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ project_path: selectedPath }),
+    });
+    if (res.ok) {
+      setProject(await res.json());
+      setShowDirPicker(false);
+    }
+  };
 
-    // Optimistically add user message
-    const tempUserMsg: IMessage = {
-      id: `temp-${Date.now()}`,
-      role: 'user',
-      content: message,
-      created_at: new Date().toISOString(),
-    };
-    setMessages(prev => [...prev, tempUserMsg]);
+  // Keyboard shortcuts (use e.code for Korean IME compatibility)
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const isInput = e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
 
-    try {
-      const res = await fetch(`/api/projects/${id}/conversations`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message }),
-      });
+      // B — toggle brainstorming panel
+      if (!isInput && e.code === 'KeyB' && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        setShowBrainstorm(prev => !prev);
+        return;
+      }
+
+      // N — new sub-project (when not in input)
+      if (!isInput && e.code === 'KeyN' && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        setShowAddSub(true);
+        return;
+      }
+
+      // T — new task (when sub-project selected, not in input)
+      if (!isInput && e.code === 'KeyT' && !e.metaKey && !e.ctrlKey && selectedSubId) {
+        e.preventDefault();
+        const addBtn = document.querySelector('[data-add-task]') as HTMLButtonElement;
+        addBtn?.click();
+        return;
+      }
+
+      // Cmd+1~6 — status change
+      if (selectedTaskId && selectedSubId && !isInput) {
+        const statusMap: Record<string, TaskStatus> = {
+          'Digit1': 'idea', 'Digit2': 'writing', 'Digit3': 'submitted',
+          'Digit4': 'testing', 'Digit5': 'done', 'Digit6': 'problem',
+        };
 
-      if (res.ok) {
-        const data = await res.json();
-        setItems(data.items);
-        // Replace the temp message with real messages
-        setMessages(prev => {
-          const withoutTemp = prev.filter(m => m.id !== tempUserMsg.id);
-          return [...withoutTemp, ...data.messages];
-        });
-        if (data.memos) {
-          setMemos(data.memos);
+        if ((e.metaKey || e.ctrlKey) && statusMap[e.code]) {
+          e.preventDefault();
+          handleTaskStatusChange(selectedTaskId, statusMap[e.code]);
         }
-      } else {
-        const data = await res.json();
-        setError(data.error || '응답에 실패했습니다');
-        // Remove temp message on error
-        setMessages(prev => prev.filter(m => m.id !== tempUserMsg.id));
       }
-    } catch {
-      setError('AI 연결에 실패했습니다');
-      setMessages(prev => prev.filter(m => m.id !== tempUserMsg.id));
-    } finally {
-      setChatLoading(false);
-    }
-  }, [id]);
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  });
 
   if (!project) {
-    return (
-      <div className="min-h-screen flex items-center justify-center text-muted-foreground">
-        로딩 중...
-      </div>
-    );
+    return <div className="min-h-screen flex items-center justify-center text-muted-foreground">Loading...</div>;
   }
 
   return (
     <div className="h-screen flex flex-col">
       {/* Header */}
-      <header className="flex items-center justify-between px-4 py-2 border-b border-border bg-card">
+      <header className="flex items-center justify-between px-4 py-2 border-b border-border bg-card flex-shrink-0">
         <div className="flex items-center gap-3">
           <button
             onClick={() => router.push('/')}
             className="text-muted-foreground hover:text-foreground hover:bg-muted transition-colors text-sm px-2 py-1 rounded-md"
           >
-            &larr; 뒤로
+            &larr; Back
           </button>
           <span className="text-border">|</span>
           <h1 className="text-sm font-semibold">{project.name}</h1>
-          {project.description && (
-            <span className="text-xs text-muted-foreground">{project.description}</span>
+          {project.project_path && (
+            <span className="text-xs text-muted-foreground font-mono truncate max-w-48" title={project.project_path}>
+              {project.project_path}
+            </span>
           )}
         </div>
         <div className="flex items-center gap-2">
-          {error && (
-            <span className="text-xs text-destructive">{error}</span>
+          {!project.project_path && (
+            <button
+              onClick={() => setShowDirPicker(true)}
+              className="px-3 py-1.5 text-xs bg-muted hover:bg-card-hover text-foreground
+                         border border-border rounded-md transition-colors"
+            >
+              Link folder
+            </button>
           )}
+        </div>
+      </header>
+
+      {/* 3-Panel Layout with resize handles */}
+      <div ref={containerRef} className="flex-1 flex overflow-hidden">
+        {/* Left: Brainstorming (collapsible) */}
+        {showBrainstorm ? (
+          <>
+            <div style={{ width: leftWidth }} className="border-r border-border flex flex-col flex-shrink-0">
+              <Editor
+                projectId={id}
+                onContentChange={() => {}}
+                onSendMessage={() => {}}
+                memos={[]}
+                chatLoading={false}
+                onCollapse={() => setShowBrainstorm(false)}
+              />
+            </div>
+            {/* Resize handle: left */}
+            <div
+              className="panel-resize-handle"
+              onMouseDown={(e) => handleMouseDown('left', e)}
+            >
+              <div className="panel-resize-handle-bar" />
+            </div>
+          </>
+        ) : (
           <button
-            onClick={() => handleStructure('')}
-            disabled={structuring}
-            className="px-3 py-1.5 text-xs bg-accent hover:bg-accent/80 text-white
-                       rounded-md transition-colors disabled:opacity-50"
+            onClick={() => setShowBrainstorm(true)}
+            className="w-8 border-r border-border flex-shrink-0 flex items-center justify-center
+                       text-muted-foreground hover:text-foreground hover:bg-card-hover transition-colors
+                       text-xs"
+            title="Show brainstorming (B)"
+            style={{ writingMode: 'vertical-rl' }}
           >
-            {structuring ? '구조화 중...' : '지금 구조화'}
+            Brainstorm
           </button>
+        )}
+
+        {/* Center: Tree (Sub-projects + Tasks) */}
+        <div style={{ width: centerWidth }} className="border-r border-border flex flex-col flex-shrink-0">
+          {/* Add sub-project input */}
+          {showAddSub && (
+            <div className="px-3 py-2 border-b border-border">
+              <input
+                type="text"
+                value={newSubName}
+                onChange={(e) => setNewSubName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleCreateSubProject();
+                  if (e.key === 'Escape') { setNewSubName(''); setShowAddSub(false); }
+                }}
+                placeholder="Sub-project name..."
+                className="w-full bg-input border border-border rounded px-2 py-1 text-xs
+                           focus:border-primary focus:outline-none text-foreground"
+                autoFocus
+              />
+            </div>
+          )}
+
+          <ProjectTree
+            subProjects={subProjects}
+            tasks={tasks}
+            selectedSubId={selectedSubId}
+            selectedTaskId={selectedTaskId}
+            onSelectSub={(subId) => { setSelectedSubId(subId); setSelectedTaskId(null); }}
+            onSelectTask={setSelectedTaskId}
+            onCreateSub={() => setShowAddSub(true)}
+            onDeleteSub={handleDeleteSubProject}
+            onCreateTask={handleCreateTask}
+            onStatusChange={handleTaskStatusChange}
+            onTodayToggle={handleTaskTodayToggle}
+          />
         </div>
-      </header>
 
-      {/* 2-Panel Layout */}
-      <div className="flex-1 flex overflow-hidden">
-        {/* Left: Editor (top) + Chat (bottom) */}
-        <div ref={leftPanelRef} className="w-1/2 border-r border-border flex flex-col">
-          <div style={{ height: `${editorPercent}%` }} className="flex flex-col min-h-0">
-            <Editor projectId={id} onContentChange={handleStructure} memos={memos} />
-          </div>
-          <ResizeHandle onResize={setEditorPercent} containerRef={leftPanelRef} />
-          <div style={{ height: `${100 - editorPercent}%` }} className="flex flex-col min-h-0">
-            <ChatPanel
-              messages={messages}
-              loading={chatLoading || structuring}
-              onSendMessage={handleSendMessage}
-            />
-          </div>
+        {/* Resize handle: center */}
+        <div
+          className="panel-resize-handle"
+          onMouseDown={(e) => handleMouseDown('center', e)}
+        >
+          <div className="panel-resize-handle-bar" />
         </div>
 
-        {/* Right: Tree View */}
-        <div className="w-1/2 flex flex-col">
-          <TreeView items={items} loading={structuring} projectId={id} onItemUpdate={handleItemUpdate} />
+        {/* Right: Task Detail */}
+        <div className="flex-1 min-w-0">
+          {selectedTask ? (
+            <TaskDetail
+              task={selectedTask}
+              projectId={id}
+              subProjectId={selectedSubId!}
+              onUpdate={handleTaskUpdate}
+              onDelete={handleTaskDelete}
+            />
+          ) : (
+            <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+              {tasks.length > 0 ? 'Select a task' : selectedSubId ? 'Create a task to get started' : 'Select a sub-project'}
+            </div>
+          )}
         </div>
       </div>
+
+      {showDirPicker && (
+        <DirectoryPicker
+          onSelect={handleSetPath}
+          onCancel={() => setShowDirPicker(false)}
+          initialPath={project.project_path || undefined}
+        />
+      )}
+
+      <ConfirmDialog
+        open={!!confirmAction}
+        title={confirmAction?.type === 'delete-sub' ? 'Delete sub-project?' : 'Delete task?'}
+        description={confirmAction?.type === 'delete-sub'
+          ? 'This will delete the sub-project and all its tasks.'
+          : 'This task will be permanently deleted.'}
+        confirmLabel="Delete"
+        variant="danger"
+        onConfirm={handleConfirmAction}
+        onCancel={() => setConfirmAction(null)}
+      />
     </div>
   );
 }
+
+export default function ProjectWorkspace({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  return (
+    <Suspense fallback={<div className="min-h-screen flex items-center justify-center text-muted-foreground">Loading...</div>}>
+      <WorkspaceInner id={id} />
+    </Suspense>
+  );
+}