idea-manager 0.6.1 → 0.7.0

package/src/components/dashboard/DashboardPanel.tsx

@@ -0,0 +1,291 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useTabContext } from '@/components/tabs/TabContext';
+import DirectoryPicker from '@/components/DirectoryPicker';
+import ConfirmDialog from '@/components/ui/ConfirmDialog';
+import DashboardTabBar, { 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 DashboardPanel() {
+  const { state, openProject, closeTab } = useTabContext();
+  const isVisible = state.activeTabId === 'dashboard';
+
+  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 fetchData = useCallback(async () => {
+    const res = await fetch('/api/projects');
+    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) {
+        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(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // Refresh when tab becomes visible
+  useEffect(() => {
+    if (isVisible && !loading) fetchData();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isVisible]);
+
+  const handleTabChange = (newTab: DashboardTab) => {
+    setTab(newTab);
+    localStorage.setItem('im-dashboard-tab', newTab);
+  };
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    const res = await fetch('/api/projects', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      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);
+      openProject(project.id, project.name);
+    }
+  };
+
+  const handleDeleteClick = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setDeleteTarget(id);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!deleteTarget) return;
+    await fetch(`/api/projects/${deleteTarget}`, { method: 'DELETE' });
+    closeTab(deleteTarget); // Close tab if open
+    setDeleteTarget(null);
+    fetchData();
+  };
+
+  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 });
+        }
+      }
+    }
+    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="h-full overflow-y-auto p-8 max-w-5xl mx-auto">
+      <header className="flex items-center justify-between mb-6">
+        <div>
+          <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>
+        </div>
+        <div className="flex items-center gap-3">
+          <DashboardTabBar 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-6 p-5 bg-card rounded-lg border border-border">
+          <input type="text" 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 focus:border-primary focus:outline-none text-foreground"
+            autoFocus />
+          <input type="text" 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-3 focus:border-primary focus:outline-none text-foreground" />
+          <div className="mb-4">
+            <button type="button" 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>
+          </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">Loading...</div>
+      ) : tab === 'today' ? (
+        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={() => openProject(task.project_id, task.projectName, task.sub_project_id, 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>
+              </div>
+            ))}
+          </div>
+        )
+      ) : (
+        <>
+          {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={() => openProject(project.id, project.name)}>
+                        <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={() => openProject(project.id, project.name)}>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={() => openProject(project.id, project.name, sp.id)} />
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )
+          ) : (
+            (() => {
+              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={() => {
+                        const proj = projects.find(p => p.id === projectId);
+                        openProject(projectId, proj?.name || projectName, 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>
+  );
+}

package/src/components/tabs/TabBar.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useTabContext } from './TabContext';
+
+export default function TabBar() {
+  const { state, setActiveTab, closeTab } = useTabContext();
+
+  return (
+    <div className="tab-bar">
+      {state.tabs.map((tab) => {
+        const isActive = state.activeTabId === tab.id;
+        const isDashboard = tab.type === 'dashboard';
+
+        return (
+          <div
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            onMouseDown={(e) => {
+              // Middle-click to close
+              if (e.button === 1 && !isDashboard) {
+                e.preventDefault();
+                closeTab(tab.id);
+              }
+            }}
+            className={`tab-item ${isActive ? 'tab-item-active' : ''}`}
+          >
+            <span className="truncate">
+              {isDashboard ? 'Dashboard' : tab.projectName || 'Project'}
+            </span>
+            {!isDashboard && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  closeTab(tab.id);
+                }}
+                className="tab-close"
+              >
+                &times;
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/tabs/TabContext.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import { createContext, useContext, useReducer, useEffect, useCallback, type ReactNode } from 'react';
+
+export interface ITab {
+  id: string;
+  type: 'dashboard' | 'project';
+  projectId?: string;
+  projectName?: string;
+  initialSubId?: string;
+  initialTaskId?: string;
+}
+
+interface ITabState {
+  tabs: ITab[];
+  activeTabId: string;
+}
+
+type TabAction =
+  | { type: 'OPEN_PROJECT'; projectId: string; projectName: string; initialSubId?: string; initialTaskId?: string }
+  | { type: 'CLOSE_TAB'; tabId: string }
+  | { type: 'SET_ACTIVE'; tabId: string }
+  | { type: 'UPDATE_TAB_NAME'; tabId: string; name: string }
+  | { type: 'CONSUME_INITIAL'; tabId: string }
+  | { type: 'HYDRATE'; state: ITabState };
+
+const DASHBOARD_TAB: ITab = { id: 'dashboard', type: 'dashboard' };
+
+function ensureDashboard(tabs: ITab[]): ITab[] {
+  if (!tabs.some(t => t.id === 'dashboard')) {
+    return [DASHBOARD_TAB, ...tabs];
+  }
+  return tabs;
+}
+
+function tabReducer(state: ITabState, action: TabAction): ITabState {
+  switch (action.type) {
+    case 'OPEN_PROJECT': {
+      const existing = state.tabs.find(t => t.projectId === action.projectId);
+      if (existing) {
+        // Update initial selection if provided
+        const tabs = state.tabs.map(t =>
+          t.id === existing.id
+            ? { ...t, initialSubId: action.initialSubId, initialTaskId: action.initialTaskId }
+            : t
+        );
+        return { tabs, activeTabId: existing.id };
+      }
+      const newTab: ITab = {
+        id: action.projectId,
+        type: 'project',
+        projectId: action.projectId,
+        projectName: action.projectName,
+        initialSubId: action.initialSubId,
+        initialTaskId: action.initialTaskId,
+      };
+      return { tabs: [...state.tabs, newTab], activeTabId: newTab.id };
+    }
+    case 'CLOSE_TAB': {
+      if (action.tabId === 'dashboard') return state;
+      const idx = state.tabs.findIndex(t => t.id === action.tabId);
+      const tabs = state.tabs.filter(t => t.id !== action.tabId);
+      let activeTabId = state.activeTabId;
+      if (state.activeTabId === action.tabId) {
+        // Activate previous tab or dashboard
+        activeTabId = tabs[Math.max(0, idx - 1)]?.id || 'dashboard';
+      }
+      return { tabs: ensureDashboard(tabs), activeTabId };
+    }
+    case 'SET_ACTIVE':
+      return { ...state, activeTabId: action.tabId };
+    case 'UPDATE_TAB_NAME':
+      return {
+        ...state,
+        tabs: state.tabs.map(t =>
+          t.id === action.tabId ? { ...t, projectName: action.name } : t
+        ),
+      };
+    case 'CONSUME_INITIAL':
+      return {
+        ...state,
+        tabs: state.tabs.map(t =>
+          t.id === action.tabId ? { ...t, initialSubId: undefined, initialTaskId: undefined } : t
+        ),
+      };
+    case 'HYDRATE':
+      return { tabs: ensureDashboard(action.state.tabs), activeTabId: action.state.activeTabId };
+    default:
+      return state;
+  }
+}
+
+const STORAGE_KEY = 'im-tabs';
+
+function loadState(): ITabState {
+  if (typeof window === 'undefined') return { tabs: [DASHBOARD_TAB], activeTabId: 'dashboard' };
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw) as ITabState;
+      return { tabs: ensureDashboard(parsed.tabs), activeTabId: parsed.activeTabId };
+    }
+  } catch { /* ignore */ }
+  return { tabs: [DASHBOARD_TAB], activeTabId: 'dashboard' };
+}
+
+interface TabContextValue {
+  state: ITabState;
+  openProject: (projectId: string, projectName: string, initialSubId?: string, initialTaskId?: string) => void;
+  closeTab: (tabId: string) => void;
+  setActiveTab: (tabId: string) => void;
+  updateTabName: (tabId: string, name: string) => void;
+  consumeInitial: (tabId: string) => void;
+}
+
+const TabCtx = createContext<TabContextValue | null>(null);
+
+export function useTabContext() {
+  const ctx = useContext(TabCtx);
+  if (!ctx) throw new Error('useTabContext must be used within TabProvider');
+  return ctx;
+}
+
+export function TabProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(tabReducer, undefined, loadState);
+
+  // Persist to localStorage
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  }, [state]);
+
+  // URL sync: update URL when active tab changes
+  useEffect(() => {
+    const activeTab = state.tabs.find(t => t.id === state.activeTabId);
+    if (!activeTab) return;
+    const path = activeTab.type === 'dashboard' ? '/' : `/projects/${activeTab.projectId}`;
+    if (window.location.pathname !== path) {
+      window.history.replaceState(null, '', path);
+    }
+  }, [state.activeTabId, state.tabs]);
+
+  // Handle initial URL on mount (e.g., direct bookmark access)
+  useEffect(() => {
+    const path = window.location.pathname;
+    const match = path.match(/^\/projects\/(.+)$/);
+    if (match) {
+      const projectId = match[1];
+      if (!state.tabs.some(t => t.projectId === projectId)) {
+        // Fetch project name and open tab
+        fetch(`/api/projects/${projectId}`)
+          .then(r => r.ok ? r.json() : null)
+          .then(data => {
+            if (data) {
+              dispatch({ type: 'OPEN_PROJECT', projectId, projectName: data.name });
+            }
+          });
+      } else {
+        dispatch({ type: 'SET_ACTIVE', tabId: projectId });
+      }
+    }
+    // Also check sessionStorage redirect
+    const redirectId = sessionStorage.getItem('im-open-project');
+    if (redirectId) {
+      sessionStorage.removeItem('im-open-project');
+      fetch(`/api/projects/${redirectId}`)
+        .then(r => r.ok ? r.json() : null)
+        .then(data => {
+          if (data) {
+            dispatch({ type: 'OPEN_PROJECT', projectId: redirectId, projectName: data.name });
+          }
+        });
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const openProject = useCallback((projectId: string, projectName: string, initialSubId?: string, initialTaskId?: string) => {
+    dispatch({ type: 'OPEN_PROJECT', projectId, projectName, initialSubId, initialTaskId });
+  }, []);
+
+  const closeTab = useCallback((tabId: string) => {
+    dispatch({ type: 'CLOSE_TAB', tabId });
+  }, []);
+
+  const setActiveTab = useCallback((tabId: string) => {
+    dispatch({ type: 'SET_ACTIVE', tabId });
+  }, []);
+
+  const updateTabName = useCallback((tabId: string, name: string) => {
+    dispatch({ type: 'UPDATE_TAB_NAME', tabId, name });
+  }, []);
+
+  const consumeInitial = useCallback((tabId: string) => {
+    dispatch({ type: 'CONSUME_INITIAL', tabId });
+  }, []);
+
+  return (
+    <TabCtx.Provider value={{ state, openProject, closeTab, setActiveTab, updateTabName, consumeInitial }}>
+      {children}
+    </TabCtx.Provider>
+  );
+}

package/src/components/tabs/TabShell.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useTabContext } from './TabContext';
+import TabBar from './TabBar';
+import DashboardPanel from '@/components/dashboard/DashboardPanel';
+import WorkspacePanel from '@/components/workspace/WorkspacePanel';
+
+export default function TabShell() {
+  const { state } = useTabContext();
+
+  return (
+    <div className="h-screen flex flex-col">
+      <TabBar />
+      <div className="flex-1 min-h-0 relative">
+        {state.tabs.map((tab) => (
+          <div
+            key={tab.id}
+            className="absolute inset-0 flex flex-col"
+            style={{ display: tab.id === state.activeTabId ? 'flex' : 'none' }}
+          >
+            {tab.type === 'dashboard' ? (
+              <DashboardPanel />
+            ) : (
+              <WorkspacePanel
+                id={tab.projectId!}
+                initialSubId={tab.initialSubId}
+                initialTaskId={tab.initialTaskId}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}