idea-manager 0.2.0 → 0.3.0

package/src/app/page.tsx

@@ -2,33 +2,92 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
+import DirectoryPicker from '@/components/DirectoryPicker';
+import ConfirmDialog from '@/components/ui/ConfirmDialog';
+import TabBar, { type DashboardTab } from '@/components/dashboard/TabBar';
+import SubProjectCard from '@/components/dashboard/SubProjectCard';
+import type { ISubProjectWithStats, ITask } from '@/types';
 
 interface IProject {
   id: string;
   name: string;
   description: string;
+  project_path: string | null;
   created_at: string;
   updated_at: string;
 }
 
+interface ProjectWithSubs extends IProject {
+  subProjects: ISubProjectWithStats[];
+}
+
 export default function Dashboard() {
   const router = useRouter();
-  const [projects, setProjects] = useState<IProject[]>([]);
+  const [projects, setProjects] = useState<ProjectWithSubs[]>([]);
+  const [todayTasks, setTodayTasks] = useState<(ITask & { projectName: string; subProjectName: string })[]>([]);
   const [showForm, setShowForm] = useState(false);
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
+  const [projectPath, setProjectPath] = useState('');
   const [loading, setLoading] = useState(true);
+  const [showDirPicker, setShowDirPicker] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
+  const [tab, setTab] = useState<DashboardTab>(() => {
+    if (typeof window !== 'undefined') {
+      return (localStorage.getItem('im-dashboard-tab') as DashboardTab) || 'active';
+    }
+    return 'active';
+  });
 
-  const fetchProjects = useCallback(async () => {
+  const fetchData = useCallback(async () => {
     const res = await fetch('/api/projects');
-    const data = await res.json();
-    setProjects(data);
+    const projectList: IProject[] = await res.json();
+
+    const withSubs = await Promise.all(
+      projectList.map(async (p) => {
+        const subRes = await fetch(`/api/projects/${p.id}/sub-projects`);
+        const subProjects: ISubProjectWithStats[] = await subRes.json();
+        return { ...p, subProjects };
+      })
+    );
+
+    setProjects(withSubs);
+
+    // Gather today tasks
+    const allToday: (ITask & { projectName: string; subProjectName: string })[] = [];
+    for (const p of withSubs) {
+      for (const sp of p.subProjects) {
+        for (const pt of sp.preview_tasks) {
+          // preview_tasks doesn't have full task data, so we need to check is_today from API
+        }
+      }
+    }
+    // Fetch today tasks from each project's tasks
+    for (const p of withSubs) {
+      for (const sp of p.subProjects) {
+        if (sp.task_count > 0) {
+          const tasksRes = await fetch(`/api/projects/${p.id}/sub-projects/${sp.id}/tasks`);
+          const tasks: ITask[] = await tasksRes.json();
+          for (const t of tasks) {
+            if (t.is_today) {
+              allToday.push({ ...t, projectName: p.name, subProjectName: sp.name });
+            }
+          }
+        }
+      }
+    }
+    setTodayTasks(allToday);
     setLoading(false);
   }, []);
 
   useEffect(() => {
-    fetchProjects();
-  }, [fetchProjects]);
+    fetchData();
+  }, [fetchData]);
+
+  const handleTabChange = (newTab: DashboardTab) => {
+    setTab(newTab);
+    localStorage.setItem('im-dashboard-tab', newTab);
+  };
 
   const handleCreate = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -37,62 +96,80 @@ export default function Dashboard() {
     const res = await fetch('/api/projects', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name: name.trim(), description: description.trim() }),
+      body: JSON.stringify({ name: name.trim(), description: description.trim(), project_path: projectPath.trim() || undefined }),
     });
 
     if (res.ok) {
       const project = await res.json();
       setName('');
       setDescription('');
+      setProjectPath('');
       setShowForm(false);
       router.push(`/projects/${project.id}`);
     }
   };
 
-  const handleDelete = async (id: string, e: React.MouseEvent) => {
+  const handleDeleteClick = (id: string, e: React.MouseEvent) => {
     e.stopPropagation();
-    if (!confirm('이 프로젝트를 삭제하시겠습니까?')) return;
+    setDeleteTarget(id);
+  };
 
-    await fetch(`/api/projects/${id}`, { method: 'DELETE' });
-    fetchProjects();
+  const handleDeleteConfirm = async () => {
+    if (!deleteTarget) return;
+    await fetch(`/api/projects/${deleteTarget}`, { method: 'DELETE' });
+    setDeleteTarget(null);
+    fetchData();
   };
 
-  const formatDate = (dateStr: string) => {
-    return new Date(dateStr).toLocaleDateString('ko-KR', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    });
+  // Filter sub-projects based on tab
+  const getVisibleCards = (): { sp: ISubProjectWithStats; projectName: string; projectId: string }[] => {
+    const cards: { sp: ISubProjectWithStats; projectName: string; projectId: string }[] = [];
+    for (const p of projects) {
+      for (const sp of p.subProjects) {
+        if (tab === 'active') {
+          if (sp.active_count > 0 || sp.problem_count > 0) {
+            cards.push({ sp, projectName: p.name, projectId: p.id });
+          }
+        } else if (tab === 'all') {
+          cards.push({ sp, projectName: p.name, projectId: p.id });
+        }
+      }
+    }
+    // Sort: active cards first
+    cards.sort((a, b) => (b.sp.active_count + b.sp.problem_count) - (a.sp.active_count + a.sp.problem_count));
+    return cards;
+  };
+
+  const STATUS_ICONS: Record<string, string> = {
+    idea: '\u{1F4A1}', writing: '\u{270F}\u{FE0F}', submitted: '\u{1F680}',
+    testing: '\u{1F9EA}', done: '\u{2705}', problem: '\u{1F534}',
   };
 
   return (
-    <div className="min-h-screen p-8 max-w-4xl mx-auto">
-      <header className="flex items-center justify-between mb-10">
+    <div className="min-h-screen p-8 max-w-5xl mx-auto">
+      <header className="flex items-center justify-between mb-6">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight">
-            IM <span className="text-muted-foreground font-normal text-lg ml-2">아이디어 매니저</span>
+          <h1 className="text-2xl font-bold tracking-tight">
+            IM <span className="text-muted-foreground font-normal text-sm ml-2">Idea Manager v2</span>
           </h1>
-          <p className="text-muted-foreground mt-1 text-sm">
-            자유롭게 아이디어를 쏟아내면, AI가 구조화해드립니다
-          </p>
         </div>
-        <button
-          onClick={() => setShowForm(!showForm)}
-          className="px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg
-                     transition-colors font-medium text-sm"
-        >
-          + 새 프로젝트
-        </button>
+        <div className="flex items-center gap-3">
+          <TabBar value={tab} onChange={handleTabChange} />
+          <button
+            onClick={() => setShowForm(!showForm)}
+            className="px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg
+                       transition-colors font-medium text-sm"
+          >
+            + Project
+          </button>
+        </div>
       </header>
 
       {showForm && (
-        <form
-          onSubmit={handleCreate}
-          className="mb-8 p-5 bg-card rounded-lg border border-border"
-        >
+        <form onSubmit={handleCreate} className="mb-6 p-5 bg-card rounded-lg border border-border">
           <input
             type="text"
-            placeholder="프로젝트 이름"
+            placeholder="Project name"
             value={name}
             onChange={(e) => setName(e.target.value)}
             className="w-full bg-input border border-border rounded-lg px-4 py-2.5 mb-3
@@ -101,75 +178,170 @@ export default function Dashboard() {
           />
           <input
             type="text"
-            placeholder="설명 (선택사항)"
+            placeholder="Description (optional)"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
-            className="w-full bg-input border border-border rounded-lg px-4 py-2.5 mb-4
+            className="w-full bg-input border border-border rounded-lg px-4 py-2.5 mb-3
                        focus:border-primary focus:outline-none text-foreground"
           />
-          <div className="flex gap-2 justify-end">
+          <div className="mb-4">
             <button
               type="button"
-              onClick={() => setShowForm(false)}
-              className="px-4 py-2 text-muted-foreground hover:text-foreground transition-colors text-sm"
+              onClick={() => setShowDirPicker(true)}
+              className="w-full bg-input border border-border rounded-lg px-4 py-2.5
+                         text-left text-sm hover:border-primary transition-colors"
             >
-              취소
+              {projectPath ? (
+                <span className="font-mono text-foreground">{projectPath}</span>
+              ) : (
+                <span className="text-muted-foreground">Project folder (optional)</span>
+              )}
             </button>
-            <button
-              type="submit"
-              className="px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg
-                         transition-colors text-sm"
-            >
-              만들기
+          </div>
+          <div className="flex gap-2 justify-end">
+            <button type="button" onClick={() => setShowForm(false)}
+              className="px-4 py-2 text-muted-foreground hover:text-foreground transition-colors text-sm">
+              Cancel
+            </button>
+            <button type="submit"
+              className="px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg transition-colors text-sm">
+              Create
             </button>
           </div>
         </form>
       )}
 
       {loading ? (
-        <div className="text-center text-muted-foreground py-20">로딩 중...</div>
-      ) : projects.length === 0 ? (
-        <div className="text-center py-20">
-          <div className="text-5xl mb-4">💡</div>
-          <p className="text-muted-foreground text-lg mb-2">아직 프로젝트가 없습니다</p>
-          <p className="text-muted-foreground text-sm">
-            &quot;새 프로젝트&quot; 버튼을 눌러 시작하세요
-          </p>
-        </div>
-      ) : (
-        <div className="space-y-3">
-          {projects.map((project) => (
-            <div
-              key={project.id}
-              onClick={() => router.push(`/projects/${project.id}`)}
-              className="p-5 bg-card hover:bg-card-hover border border-border rounded-lg
-                         cursor-pointer transition-colors group"
-            >
-              <div className="flex items-start justify-between">
-                <div className="flex-1">
-                  <h2 className="text-lg font-semibold group-hover:text-primary transition-colors">
-                    {project.name}
-                  </h2>
-                  {project.description && (
-                    <p className="text-muted-foreground text-sm mt-1">{project.description}</p>
-                  )}
-                  <p className="text-muted-foreground text-xs mt-2">
-                    수정일 {formatDate(project.updated_at)}
-                  </p>
+        <div className="text-center text-muted-foreground py-20">Loading...</div>
+      ) : tab === 'today' ? (
+        /* Today tab */
+        todayTasks.length === 0 ? (
+          <div className="text-center py-20 text-muted-foreground">
+            <p className="text-lg mb-2">No tasks marked for today</p>
+            <p className="text-sm">Mark tasks with the Today button in task detail</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {todayTasks.map((task) => (
+              <div
+                key={task.id}
+                onClick={() => router.push(`/projects/${task.project_id}?sub=${task.sub_project_id}&task=${task.id}`)}
+                className="flex items-center gap-3 p-3 bg-card hover:bg-card-hover border border-border
+                           rounded-lg cursor-pointer transition-colors"
+              >
+                <span className="text-sm">{STATUS_ICONS[task.status]}</span>
+                <div className="flex-1 min-w-0">
+                  <span className="text-sm font-medium">{task.title}</span>
+                  <span className="text-xs text-muted-foreground ml-2">
+                    {task.projectName} / {task.subProjectName}
+                  </span>
                 </div>
-                <button
-                  onClick={(e) => handleDelete(project.id, e)}
-                  className="text-muted-foreground hover:text-destructive transition-colors opacity-0
-                             group-hover:opacity-100 p-1 text-sm"
-                  title="프로젝트 삭제"
-                >
-                  삭제
-                </button>
               </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
+        )
+      ) : (
+        /* Active / All tabs */
+        <>
+          {/* Project headers for All tab */}
+          {tab === 'all' ? (
+            projects.length === 0 ? (
+              <div className="text-center py-20">
+                <p className="text-muted-foreground text-lg mb-2">No projects yet</p>
+                <p className="text-muted-foreground text-sm">Click + Project to get started</p>
+              </div>
+            ) : (
+              <div className="space-y-6">
+                {projects.map((project) => (
+                  <div key={project.id}>
+                    <div className="flex items-center justify-between mb-3">
+                      <div
+                        className="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors"
+                        onClick={() => router.push(`/projects/${project.id}`)}
+                      >
+                        <h2 className="text-sm font-semibold">{project.name}</h2>
+                        {project.project_path && (
+                          <span className="text-xs text-muted-foreground font-mono truncate max-w-48">
+                            {project.project_path}
+                          </span>
+                        )}
+                      </div>
+                      <button
+                        onClick={(e) => handleDeleteClick(project.id, e)}
+                        className="text-xs text-muted-foreground hover:text-destructive transition-colors"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                    {project.subProjects.length === 0 ? (
+                      <div className="text-xs text-muted-foreground py-4 text-center border border-dashed border-border rounded-lg">
+                        No sub-projects.{' '}
+                        <span
+                          className="text-primary cursor-pointer hover:underline"
+                          onClick={() => router.push(`/projects/${project.id}`)}
+                        >
+                          Open project
+                        </span>{' '}
+                        to add one.
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                        {project.subProjects.map((sp) => (
+                          <SubProjectCard
+                            key={sp.id}
+                            subProject={sp}
+                            projectName={project.name}
+                            onClick={() => router.push(`/projects/${project.id}?sub=${sp.id}`)}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )
+          ) : (
+            /* Active tab */
+            (() => {
+              const cards = getVisibleCards();
+              return cards.length === 0 ? (
+                <div className="text-center py-20 text-muted-foreground">
+                  <p className="text-lg mb-2">No active tasks</p>
+                  <p className="text-sm">Submit tasks to see them here</p>
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                  {cards.map(({ sp, projectName, projectId }) => (
+                    <SubProjectCard
+                      key={sp.id}
+                      subProject={sp}
+                      projectName={projectName}
+                      onClick={() => router.push(`/projects/${projectId}?sub=${sp.id}`)}
+                    />
+                  ))}
+                </div>
+              );
+            })()
+          )}
+        </>
+      )}
+
+      {showDirPicker && (
+        <DirectoryPicker
+          onSelect={(path) => { setProjectPath(path); setShowDirPicker(false); }}
+          onCancel={() => setShowDirPicker(false)}
+        />
       )}
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        title="Delete project?"
+        description="This will permanently delete the project and all its data."
+        confirmLabel="Delete"
+        variant="danger"
+        onConfirm={handleDeleteConfirm}
+        onCancel={() => setDeleteTarget(null)}
+      />
     </div>
   );
 }