├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    ├── repo-to-text
    └── workflows
    │   └── main.yml
├── .gitignore
├── README.md
├── app
    ├── components
    │   ├── TaskManager.tsx
    │   ├── categories
    │   │   └── CategoryModal.tsx
    │   ├── layout
    │   │   ├── NavigationPanel.tsx
    │   │   └── TaskPanelLayout.tsx
    │   └── tasks
    │   │   ├── BoardView.tsx
    │   │   ├── CalendarView.tsx
    │   │   ├── MindMapNode.tsx
    │   │   ├── MindMapView.tsx
    │   │   ├── TaskContextMenu.tsx
    │   │   ├── TaskDetailPanel.tsx
    │   │   └── TaskList.tsx
    ├── favicon.ico
    ├── globals.css
    ├── hooks
    │   ├── useAsyncStorage.ts
    │   ├── useCategories.ts
    │   ├── useNavigation.ts
    │   └── useTasks.ts
    ├── layout.tsx
    ├── page.tsx
    ├── theme
    │   └── theme.ts
    └── types
    │   ├── category.ts
    │   ├── mindmap.ts
    │   └── task.ts
├── eslint.config.mjs
├── instructions.txt
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
    ├── file.svg
    ├── globe.svg
    ├── next.svg
    ├── vercel.svg
    └── window.svg
├── tailwind.config.ts
└── tsconfig.json


/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: 'bug'
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: 'enhancement'
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/repo-to-text:
--------------------------------------------------------------------------------
 1 | name: Generate Repository Text with Docker Compose
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ main ]
 6 |   pull_request:
 7 |     branches: [ main ]
 8 |   workflow_dispatch:
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 | 
14 |     steps:
15 |     - name: Checkout repository
16 |       uses: actions/checkout@v3
17 | 
18 |     - name: Set up Docker Compose
19 |       run: |
20 |         docker-compose up --build
21 | 
22 |     - name: Run repo-to-text
23 |       run: |
24 |         docker-compose run repo-to-text . --output-dir /home/user/output
25 | 
26 |     - name: Copy output to workspace
27 |       run: |
28 |         cp /home/user/output/* ./output/
29 | 
30 |     - name: Upload output as artifact
31 |       uses: actions/upload-artifact@v3
32 |       with:
33 |         name: repo-text-output
34 |         path: ./output/repo-to-text_*.txt
35 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Generate Repository Text
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ main ]
 6 |   pull_request:
 7 |     branches: [ main ]
 8 |   workflow_dispatch:  # Allows manual triggering
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 | 
14 |     steps:
15 |     - name: Checkout repository
16 |       uses: actions/checkout@v3
17 | 
18 |     - name: Set up Python
19 |       uses: actions/setup-python@v4
20 |       with:
21 |         python-version: '3.12'
22 | 
23 |     - name: Install dependencies
24 |       run: |
25 |         python -m pip install --upgrade pip
26 |         pip install hatchling pathspec argparse PyYAML
27 | 
28 |     - name: Install repo-to-text
29 |       run: |
30 |         pip install repo-to-text
31 | 
32 |     - name: Run repo-to-text
33 |       run: |
34 |         repo-to-text . --output-dir ./output
35 | 
36 |     - name: Upload output as artifact
37 |       uses: actions/upload-artifact@v3
38 |       with:
39 |         name: repo-text-output
40 |         path: ./output/repo-to-text_*.txt
41 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 | 


--------------------------------------------------------------------------------
/app/components/TaskManager.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React from 'react';
  4 | import TaskList from './tasks/TaskList';
  5 | import BoardView from './tasks/BoardView';
  6 | import MindMapView from './tasks/MindMapView';
  7 | import TaskDetailPanel from './tasks/TaskDetailPanel';
  8 | import { Task } from '../types/task';
  9 | import { useTasks } from '../hooks/useTasks';
 10 | 
 11 | type ViewMode = 'list' | 'board' | 'mindmap';
 12 | 
 13 | const TaskManager: React.FC = () => {
 14 |   const {
 15 |     tasks,
 16 |     loading,
 17 |     addTask,
 18 |     updateTask,
 19 |     deleteTask,
 20 |     updateTaskStatus
 21 |   } = useTasks();
 22 | 
 23 |   const [selectedTaskId, setSelectedTaskId] = React.useState<string | null>(null);
 24 |   const [viewMode, setViewMode] = React.useState<ViewMode>('list');
 25 | 
 26 |   const selectedTask = React.useMemo(() => {
 27 |     return tasks.find(task => task.id === selectedTaskId) || null;
 28 |   }, [tasks, selectedTaskId]);
 29 | 
 30 |   if (loading) {
 31 |     return (
 32 |       <div className="h-full flex items-center justify-center">
 33 |         <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-accent-primary"></div>
 34 |       </div>
 35 |     );
 36 |   }
 37 | 
 38 |   return (
 39 |     <div className="h-full flex">
 40 |       {/* Main Content */}
 41 |       <div className="flex-1 flex flex-col">
 42 |         {/* View Toggle */}
 43 |         <div className="p-4 border-b border-border-default">
 44 |           <div className="flex items-center gap-4">
 45 |             <button
 46 |               onClick={() => setViewMode('list')}
 47 |               className={`px-4 py-2 rounded-md ${
 48 |                 viewMode === 'list'
 49 |                   ? 'bg-accent-primary text-white'
 50 |                   : 'text-text-secondary hover:bg-hover'
 51 |               }`}
 52 |             >
 53 |               List View
 54 |             </button>
 55 |             <button
 56 |               onClick={() => setViewMode('board')}
 57 |               className={`px-4 py-2 rounded-md ${
 58 |                 viewMode === 'board'
 59 |                   ? 'bg-accent-primary text-white'
 60 |                   : 'text-text-secondary hover:bg-hover'
 61 |               }`}
 62 |             >
 63 |               Board View
 64 |             </button>
 65 |             <button
 66 |               onClick={() => setViewMode('mindmap')}
 67 |               className={`px-4 py-2 rounded-md ${
 68 |                 viewMode === 'mindmap'
 69 |                   ? 'bg-accent-primary text-white'
 70 |                   : 'text-text-secondary hover:bg-hover'
 71 |               }`}
 72 |             >
 73 |               Mind Map
 74 |             </button>
 75 |           </div>
 76 |         </div>
 77 | 
 78 |         {/* Task Views */}
 79 |         {viewMode === 'list' ? (
 80 |           <TaskList
 81 |             tasks={tasks}
 82 |             onTaskSelect={setSelectedTaskId}
 83 |             onTaskStatusChange={updateTaskStatus}
 84 |           />
 85 |         ) : viewMode === 'board' ? (
 86 |           <BoardView
 87 |             tasks={tasks}
 88 |             onTaskSelect={setSelectedTaskId}
 89 |             onTaskStatusChange={updateTaskStatus}
 90 |           />
 91 |         ) : (
 92 |           <MindMapView
 93 |             tasks={tasks}
 94 |             onTaskSelect={setSelectedTaskId}
 95 |             onTaskCreate={addTask}
 96 |           />
 97 |         )}
 98 |       </div>
 99 | 
100 |       {/* Task Detail Panel */}
101 |       <div className="w-96 border-l border-border-default">
102 |         <TaskDetailPanel
103 |           task={selectedTask}
104 |           onClose={() => setSelectedTaskId(null)}
105 |           onSave={updateTask}
106 |         />
107 |       </div>
108 |     </div>
109 |   );
110 | };
111 | 
112 | export default TaskManager;


--------------------------------------------------------------------------------
/app/components/categories/CategoryModal.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { Category } from '../../types/category';
  3 | 
  4 | interface CategoryModalProps {
  5 |   isOpen: boolean;
  6 |   onClose: () => void;
  7 |   onSave: (categoryData: Omit<Category, 'id' | 'createdAt' | 'updatedAt'>) => void;
  8 |   initialData?: Partial<Category>;
  9 | }
 10 | 
 11 | const COLORS = [
 12 |   '#EF4444', // red
 13 |   '#F97316', // orange
 14 |   '#F59E0B', // amber
 15 |   '#84CC16', // lime
 16 |   '#10B981', // emerald
 17 |   '#06B6D4', // cyan
 18 |   '#3B82F6', // blue
 19 |   '#6366F1', // indigo
 20 |   '#8B5CF6', // violet
 21 |   '#EC4899', // pink
 22 | ];
 23 | 
 24 | const CategoryModal: React.FC<CategoryModalProps> = ({
 25 |   isOpen,
 26 |   onClose,
 27 |   onSave,
 28 |   initialData = {},
 29 | }) => {
 30 |   const [name, setName] = useState(initialData.name || '');
 31 |   const [description, setDescription] = useState(initialData.description || '');
 32 |   const [color, setColor] = useState(initialData.color || COLORS[0]);
 33 | 
 34 |   if (!isOpen) return null;
 35 | 
 36 |   const handleSubmit = (e: React.FormEvent) => {
 37 |     e.preventDefault();
 38 |     onSave({
 39 |       name,
 40 |       description,
 41 |       color,
 42 |     });
 43 |     onClose();
 44 |   };
 45 | 
 46 |   return (
 47 |     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
 48 |       <div className="bg-bg-secondary rounded-lg shadow-xl w-full max-w-md">
 49 |         <div className="p-6">
 50 |           <h2 className="text-xl font-semibold mb-4">
 51 |             {initialData.id ? 'Edit Category' : 'New Category'}
 52 |           </h2>
 53 |           <form onSubmit={handleSubmit}>
 54 |             <div className="space-y-4">
 55 |               {/* Name Input */}
 56 |               <div>
 57 |                 <label htmlFor="name" className="block text-sm font-medium mb-1">
 58 |                   Name
 59 |                 </label>
 60 |                 <input
 61 |                   type="text"
 62 |                   id="name"
 63 |                   value={name}
 64 |                   onChange={(e) => setName(e.target.value)}
 65 |                   className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded-md 
 66 |                            focus:outline-none focus:border-accent-primary"
 67 |                   required
 68 |                 />
 69 |               </div>
 70 | 
 71 |               {/* Description Input */}
 72 |               <div>
 73 |                 <label htmlFor="description" className="block text-sm font-medium mb-1">
 74 |                   Description
 75 |                 </label>
 76 |                 <textarea
 77 |                   id="description"
 78 |                   value={description}
 79 |                   onChange={(e) => setDescription(e.target.value)}
 80 |                   className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded-md 
 81 |                            focus:outline-none focus:border-accent-primary min-h-[80px]"
 82 |                 />
 83 |               </div>
 84 | 
 85 |               {/* Color Selection */}
 86 |               <div>
 87 |                 <label className="block text-sm font-medium mb-2">
 88 |                   Color
 89 |                 </label>
 90 |                 <div className="flex flex-wrap gap-2">
 91 |                   {COLORS.map((c) => (
 92 |                     <button
 93 |                       key={c}
 94 |                       type="button"
 95 |                       onClick={() => setColor(c)}
 96 |                       className={`w-8 h-8 rounded-full ${
 97 |                         color === c ? 'ring-2 ring-accent-primary ring-offset-2 ring-offset-bg-secondary' : ''
 98 |                       }`}
 99 |                       style={{ backgroundColor: c }}
100 |                       aria-label={`Select color ${c}`}
101 |                     />
102 |                   ))}
103 |                 </div>
104 |               </div>
105 |             </div>
106 | 
107 |             {/* Action Buttons */}
108 |             <div className="flex justify-end gap-3 mt-6">
109 |               <button
110 |                 type="button"
111 |                 onClick={onClose}
112 |                 className="px-4 py-2 text-text-secondary hover:bg-hover rounded-md"
113 |               >
114 |                 Cancel
115 |               </button>
116 |               <button
117 |                 type="submit"
118 |                 className="px-4 py-2 bg-accent-primary text-white rounded-md hover:bg-opacity-90"
119 |               >
120 |                 Save
121 |               </button>
122 |             </div>
123 |           </form>
124 |         </div>
125 |       </div>
126 |     </div>
127 |   );
128 | };
129 | 
130 | export default CategoryModal;


--------------------------------------------------------------------------------
/app/components/layout/NavigationPanel.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React from 'react';
  4 | 
  5 | interface NavItem {
  6 |   id: string;
  7 |   label: string;
  8 |   icon?: string;
  9 |   count?: number;
 10 | }
 11 | 
 12 | interface NavigationPanelProps {
 13 |   categories: NavItem[];
 14 |   smartLists: NavItem[];
 15 |   tags: NavItem[];
 16 |   activeSmartList?: string;
 17 |   activeCategory?: string;
 18 |   activeTag?: string;
 19 |   activeView?: string;
 20 |   onSmartListClick?: (id: string) => void;
 21 |   onCategoryClick?: (id: string) => void;
 22 |   onTagClick?: (id: string) => void;
 23 |   renderCategoryHeader?: () => React.ReactNode;
 24 |   onViewChange?: (view: 'list' | 'board' | 'calendar') => void;
 25 | }
 26 | 
 27 | const NavigationPanel: React.FC<NavigationPanelProps> = ({
 28 |   categories,
 29 |   smartLists,
 30 |   tags,
 31 |   activeSmartList,
 32 |   activeCategory,
 33 |   activeTag,
 34 |   activeView = 'list',
 35 |   renderCategoryHeader,
 36 |   onSmartListClick = () => {},
 37 |   onCategoryClick = () => {},
 38 |   onTagClick = () => {},
 39 |   onViewChange = () => {},
 40 | }) => {
 41 |   return (
 42 |     <nav className="h-full flex flex-col text-text-primary">
 43 |       {/* Header */}
 44 |       <div className="mb-6 px-4">
 45 |         <h1 className="text-xl font-semibold text-text-primary">Tasks</h1>
 46 |       </div>
 47 | 
 48 |       {/* Smart Lists */}
 49 |       <div className="mb-8">
 50 |         <h2 className="text-sm font-medium text-text-secondary mb-2">SMART LISTS</h2>
 51 |         <ul className="space-y-1">
 52 |           {smartLists.map((item) => (
 53 |             <li key={item.id}>
 54 |               <button
 55 |                 onClick={() => onSmartListClick(item.id)}
 56 |                 className={`w-full text-left px-4 py-2.5 rounded-md hover:bg-hover 
 57 |                          flex items-center justify-between transition-colors duration-200
 58 |                          ${activeSmartList === item.id ? 'bg-accent-primary bg-opacity-10' : ''}`}
 59 |               >
 60 |                 <span>{item.label}</span>
 61 |                 {item.count && (
 62 |                   <span className="text-xs font-medium text-text-secondary">{item.count}</span>
 63 |                 )}
 64 |               </button>
 65 |             </li>
 66 |           ))}
 67 |         </ul>
 68 |       </div>
 69 | 
 70 |       {/* Categories */}
 71 |       <div className="mb-8">
 72 |         {renderCategoryHeader ? renderCategoryHeader() : <h2 className="text-sm font-medium text-text-secondary mb-2">CATEGORIES</h2>}
 73 |         <ul className="space-y-1">
 74 |           {categories.map((category) => (
 75 |             <li key={category.id}>
 76 |               <button
 77 |                 onClick={() => onCategoryClick(category.id)}
 78 |                 className={`w-full text-left px-4 py-2.5 rounded-md hover:bg-hover 
 79 |                          flex items-center justify-between transition-colors duration-200
 80 |                          ${activeCategory === category.id ? 'bg-accent-primary bg-opacity-10' : ''}`}
 81 |               >
 82 |                 <span>{category.label}</span>
 83 |                 {category.count && (
 84 |                   <span className="text-xs font-medium text-text-secondary">{category.count}</span>
 85 |                 )}
 86 |               </button>
 87 |             </li>
 88 |           ))}
 89 |         </ul>
 90 |       </div>
 91 | 
 92 |       {/* Tags */}
 93 |       <div className="mb-6">
 94 |         <h2 className="text-sm font-medium text-text-secondary mb-2">TAGS</h2>
 95 |         <div className="flex flex-wrap gap-2 px-4">
 96 |           {tags.map((tag) => (
 97 |             <button
 98 |               key={tag.id}
 99 |               onClick={() => onTagClick(tag.id)}
100 |               className={`px-3 py-1.5 rounded-full text-xs hover:bg-accent-primary 
101 |                        hover:bg-opacity-10 transition-colors duration-200
102 |                        ${activeTag === tag.id ? 'bg-accent-primary bg-opacity-10' : 'bg-bg-tertiary'}`}
103 |             >
104 |               <span className="flex items-center gap-2">
105 |                 {tag.label}
106 |                 {tag.count && <span className="text-text-secondary text-xs ml-1">({tag.count})</span>}
107 |               </span>
108 |             </button>
109 |           ))}
110 |         </div>
111 |       </div>
112 | 
113 |       {/* View Options */}
114 |       <div className="mt-auto px-4 pb-4">
115 |         <h2 className="text-sm font-medium text-text-secondary mb-2">VIEW</h2>
116 |         <div className="bg-bg-tertiary rounded-md p-2 flex gap-2">
117 |           <button
118 |             onClick={() => onViewChange('list')}
119 |             className={`flex-1 px-3 py-2.5 rounded text-sm font-medium ${
120 |               activeView === 'list' ? 'bg-accent-primary text-white' : 'hover:bg-hover'
121 |             }`}
122 |             aria-label="List view"
123 |           >
124 |             List
125 |           </button>
126 |           <button
127 |             onClick={() => onViewChange('board')}
128 |             className={`flex-1 px-3 py-2.5 rounded text-sm font-medium ${
129 |               activeView === 'board' ? 'bg-accent-primary text-white' : 'hover:bg-hover'
130 |             }`}
131 |             aria-label="Board view"
132 |           >
133 |             Board
134 |           </button>
135 |           <button
136 |             onClick={() => onViewChange('calendar')}
137 |             className={`flex-1 px-3 py-2.5 rounded text-sm font-medium ${
138 |               activeView === 'calendar' ? 'bg-accent-primary text-white' : 'hover:bg-hover'
139 |             }`}
140 |             aria-label="Calendar view"
141 |           >
142 |             Calendar
143 |           </button>
144 |         </div>
145 |       </div>
146 |     </nav>
147 |   );
148 | };
149 | 
150 | export default NavigationPanel;


--------------------------------------------------------------------------------
/app/components/layout/TaskPanelLayout.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { ReactNode } from 'react';
  4 | 
  5 | interface TaskPanelLayoutProps {
  6 |   leftPanel: ReactNode;
  7 |   mainPanel: ReactNode;
  8 |   rightPanel: ReactNode;
  9 |   isRightPanelVisible?: boolean;
 10 | }
 11 | 
 12 | const TaskPanelLayout: React.FC<TaskPanelLayoutProps> = ({
 13 |   leftPanel,
 14 |   mainPanel,
 15 |   rightPanel,
 16 |   isRightPanelVisible = false,
 17 | }) => {
 18 |   const [isLeftPanelOpen, setIsLeftPanelOpen] = React.useState(true);
 19 |   const [isRightPanelOpen, setIsRightPanelOpen] = React.useState(false);
 20 | 
 21 |   // Update right panel state when visibility changes
 22 |   React.useEffect(() => {
 23 |     setIsRightPanelOpen(isRightPanelVisible);
 24 |   }, [isRightPanelVisible]);
 25 | 
 26 |   return (
 27 |     <div className="flex h-[100dvh] bg-bg-primary text-text-primary overflow-hidden">
 28 |       {/* Mobile Navigation Toggle */}
 29 |       <div className="fixed top-4 left-4 md:hidden z-30 ml-2">
 30 |         <button
 31 |           onClick={() => setIsLeftPanelOpen(!isLeftPanelOpen)}
 32 |           className="p-2 bg-bg-secondary rounded-md hover:bg-hover border border-border-default"
 33 |           aria-label={isLeftPanelOpen ? 'Close navigation' : 'Open navigation'}
 34 |         >
 35 |           <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 36 |             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
 37 |           </svg>
 38 |         </button>
 39 |       </div>
 40 | 
 41 |       {/* Left Navigation Panel */}
 42 |       <div
 43 |         className={`fixed md:relative left-0 top-0 h-full bg-bg-secondary md:block
 44 |                    w-64 md:w-72 border-r border-border-default transform md:translate-x-0
 45 |                    panel-transition z-20 ${
 46 |                      isLeftPanelOpen ? 'translate-x-0 shadow-lg md:shadow-none' : '-translate-x-full md:translate-x-0'
 47 |                    }`}
 48 |       >
 49 |         <div className="h-full overflow-y-auto py-4 px-2">
 50 |           {leftPanel}
 51 |         </div>
 52 |       </div>
 53 | 
 54 |       {/* Main Task List Panel */}
 55 |       <div className={`flex-1 min-w-0 bg-bg-primary overflow-hidden transition-all duration-300 
 56 |                      ${isRightPanelOpen ? 'md:mr-[380px]' : 'md:mr-0'}`}
 57 |       >
 58 |         <div className="h-full overflow-y-auto pt-16 md:pt-4 px-4 flex flex-col">
 59 |           {mainPanel}
 60 |         </div>
 61 |       </div>
 62 | 
 63 |       {/* Right Detail Panel */}
 64 |       <div
 65 |         className={`fixed right-0 top-0 h-full bg-bg-secondary
 66 |                    w-[320px] max-w-[85vw] md:w-[380px] border-l border-border-default
 67 |                    transform panel-transition z-20 shadow-lg md:shadow-none
 68 |                    ${isRightPanelOpen ? 'translate-x-0' : 'translate-x-full'}`}
 69 |       >
 70 |         <div className="h-full overflow-y-auto py-4 px-2">
 71 |           {rightPanel}
 72 |         </div>
 73 |         {/* Panel Toggle Button */}
 74 |         <button
 75 |           onClick={() => setIsRightPanelOpen(!isRightPanelOpen)}
 76 |           className="absolute left-0 top-1/2 -translate-x-full transform bg-bg-secondary p-2 rounded-l-md 
 77 |                    border-t border-b border-l border-border-default hidden items-center justify-center hover:bg-hover"
 78 |           aria-label={isRightPanelOpen ? 'Collapse panel' : 'Expand panel'}
 79 |         >
 80 |           <svg
 81 |             className={`w-4 h-4 transition-transform duration-200 ${isRightPanelOpen ? 'rotate-180' : ''}`}
 82 |             fill="none"
 83 |             stroke="currentColor"
 84 |             viewBox="0 0 24 24"
 85 |           >
 86 |             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
 87 |           </svg>
 88 |         </button>
 89 |       </div>
 90 | 
 91 |       {/* Backdrop for mobile navigation */}
 92 |       {isLeftPanelOpen && (
 93 |         <div
 94 |           className="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden panel-transition"
 95 |           onClick={() => setIsLeftPanelOpen(false)}
 96 |         />
 97 |       )}
 98 |     </div>
 99 |   );
100 | };
101 | 
102 | export default TaskPanelLayout;


--------------------------------------------------------------------------------
/app/components/tasks/BoardView.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React from 'react';
  4 | import { Task } from '../../types/task';
  5 | 
  6 | interface BoardViewProps {
  7 |   tasks: Task[];
  8 |   onTaskSelect: (taskId: string) => void;
  9 |   onTaskStatusChange: (taskId: string, status: Task['status']) => void;
 10 | }
 11 | 
 12 | const BoardView: React.FC<BoardViewProps> = ({
 13 |   tasks,
 14 |   onTaskSelect,
 15 |   onTaskStatusChange,
 16 | }) => {
 17 |   const columns = [
 18 |     { id: 'todo', label: 'To Do' },
 19 |     { id: 'in_progress', label: 'In Progress' },
 20 |     { id: 'completed', label: 'Completed' },
 21 |   ];
 22 | 
 23 |   const tasksByStatus = tasks.reduce((acc, task) => {
 24 |     if (!acc[task.status]) {
 25 |       acc[task.status] = [];
 26 |     }
 27 |     acc[task.status].push(task);
 28 |     return acc;
 29 |   }, {} as Record<string, Task[]>);
 30 | 
 31 |   const handleDragStart = (e: React.DragEvent<HTMLDivElement>, taskId: string) => {
 32 |     e.dataTransfer.setData('taskId', taskId);
 33 |   };
 34 | 
 35 |   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
 36 |     e.preventDefault();
 37 |   };
 38 | 
 39 |   const handleDrop = (e: React.DragEvent<HTMLDivElement>, status: Task['status']) => {
 40 |     e.preventDefault();
 41 |     const taskId = e.dataTransfer.getData('taskId');
 42 |     onTaskStatusChange(taskId, status);
 43 |   };
 44 | 
 45 |   return (
 46 |     <div className="h-full flex flex-col bg-bg-primary">
 47 |       {/* Board Header */}
 48 |       <div className="p-4 border-b border-border-default">
 49 |         <h2 className="text-xl font-semibold">Board View</h2>
 50 |       </div>
 51 | 
 52 |       {/* Board Columns */}
 53 |       <div className="flex-1 overflow-x-auto p-4">
 54 |         <div className="flex gap-4 h-full min-w-fit">
 55 |           {columns.map((column) => (
 56 |             <div
 57 |               key={column.id}
 58 |               className="flex-1 min-w-[300px] bg-bg-secondary rounded-lg p-4"
 59 |               onDragOver={handleDragOver}
 60 |               onDrop={(e) => handleDrop(e, column.id as Task['status'])}
 61 |             >
 62 |               <h3 className="text-lg font-medium mb-4">{column.label}</h3>
 63 |               <div className="space-y-2">
 64 |                 {(tasksByStatus[column.id] || []).map((task) => (
 65 |                   <div
 66 |                     key={task.id}
 67 |                     draggable
 68 |                     onDragStart={(e) => handleDragStart(e, task.id)}
 69 |                     onClick={() => onTaskSelect(task.id)}
 70 |                     className="bg-bg-tertiary p-4 rounded-lg cursor-pointer hover:shadow-md transition-shadow duration-200"
 71 |                   >
 72 |                     <div className="flex items-start gap-2">
 73 |                       <div className={`w-2 h-2 rounded-full mt-2 ${
 74 |                         task.priority === 'high' ? 'bg-priority-high' :
 75 |                         task.priority === 'medium' ? 'bg-priority-medium' :
 76 |                         'bg-priority-low'
 77 |                       }`} />
 78 |                       <div className="flex-1">
 79 |                         <h4 className="font-medium mb-2">{task.title}</h4>
 80 |                         {task.tags && task.tags.length > 0 && (
 81 |                           <div className="flex flex-wrap gap-1 mb-2">
 82 |                             {task.tags.map((tag) => (
 83 |                               <span
 84 |                                 key={tag}
 85 |                                 className="px-2 py-0.5 rounded-full bg-bg-secondary text-xs"
 86 |                               >
 87 |                                 {tag}
 88 |                               </span>
 89 |                             ))}
 90 |                           </div>
 91 |                         )}
 92 |                         {task.dueDate && (
 93 |                           <div className="text-sm text-text-secondary">
 94 |                             Due {new Date(task.dueDate).toLocaleDateString()}
 95 |                           </div>
 96 |                         )}
 97 |                       </div>
 98 |                     </div>
 99 |                   </div>
100 |                 ))}
101 |               </div>
102 |             </div>
103 |           ))}
104 |         </div>
105 |       </div>
106 |     </div>
107 |   );
108 | };
109 | 
110 | export default BoardView;


--------------------------------------------------------------------------------
/app/components/tasks/CalendarView.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React from 'react';
  4 | import { Task } from '../../types/task';
  5 | 
  6 | interface CalendarViewProps {
  7 |   tasks: Task[];
  8 |   onTaskSelect: (taskId: string) => void;
  9 | }
 10 | 
 11 | const CalendarView: React.FC<CalendarViewProps> = ({
 12 |   tasks,
 13 |   onTaskSelect,
 14 | }) => {
 15 |   const [currentDate, setCurrentDate] = React.useState(new Date());
 16 |   
 17 |   // Get first day of the month
 18 |   const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
 19 |   const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
 20 |   
 21 |   // Get days in month
 22 |   const daysInMonth = lastDayOfMonth.getDate();
 23 |   const firstDayWeekday = firstDayOfMonth.getDay();
 24 | 
 25 |   // Group tasks by date
 26 |   const tasksByDate = tasks.reduce((acc, task) => {
 27 |     if (task.dueDate) {
 28 |       const date = new Date(task.dueDate);
 29 |       const dateKey = date.toISOString().split('T')[0];
 30 |       if (!acc[dateKey]) {
 31 |         acc[dateKey] = [];
 32 |       }
 33 |       acc[dateKey].push(task);
 34 |     }
 35 |     return acc;
 36 |   }, {} as Record<string, Task[]>);
 37 | 
 38 |   const changeMonth = (offset: number) => {
 39 |     setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + offset, 1));
 40 |   };
 41 | 
 42 |   return (
 43 |     <div className="h-full flex flex-col bg-bg-primary">
 44 |       {/* Calendar Header */}
 45 |       <div className="p-4 border-b border-border-default">
 46 |         <div className="flex items-center justify-between mb-4">
 47 |           <h2 className="text-xl font-semibold">Calendar View</h2>
 48 |           <div className="flex items-center gap-2">
 49 |             <button
 50 |               onClick={() => changeMonth(-1)}
 51 |               className="p-2 rounded-md hover:bg-hover"
 52 |               aria-label="Previous month"
 53 |             >
 54 |               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 55 |                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
 56 |               </svg>
 57 |             </button>
 58 |             <span className="text-lg font-medium">
 59 |               {currentDate.toLocaleString('default', { month: 'long', year: 'numeric' })}
 60 |             </span>
 61 |             <button
 62 |               onClick={() => changeMonth(1)}
 63 |               className="p-2 rounded-md hover:bg-hover"
 64 |               aria-label="Next month"
 65 |             >
 66 |               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 67 |                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
 68 |               </svg>
 69 |             </button>
 70 |           </div>
 71 |         </div>
 72 | 
 73 |         {/* Weekday Headers */}
 74 |         <div className="grid grid-cols-7 gap-1 mb-1">
 75 |           {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
 76 |             <div key={day} className="text-center text-sm font-medium text-text-secondary py-2">
 77 |               {day}
 78 |             </div>
 79 |           ))}
 80 |         </div>
 81 |       </div>
 82 | 
 83 |       {/* Calendar Grid */}
 84 |       <div className="flex-1 overflow-y-auto p-4">
 85 |         <div className="grid grid-cols-7 gap-1 auto-rows-fr">
 86 |           {/* Empty cells for days before the first of the month */}
 87 |           {Array.from({ length: firstDayWeekday }).map((_, index) => (
 88 |             <div key={`empty-start-${index}`} className="bg-bg-secondary rounded-lg p-2" />
 89 |           ))}
 90 | 
 91 |           {/* Calendar days */}
 92 |           {Array.from({ length: daysInMonth }).map((_, index) => {
 93 |             const day = index + 1;
 94 |             const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
 95 |             const dateKey = date.toISOString().split('T')[0];
 96 |             const dayTasks = tasksByDate[dateKey] || [];
 97 |             const isToday = new Date().toDateString() === date.toDateString();
 98 | 
 99 |             return (
100 |               <div
101 |                 key={day}
102 |                 className={`bg-bg-secondary rounded-lg p-2 flex flex-col min-h-[100px]
103 |                           ${isToday ? 'ring-2 ring-accent-primary' : ''}`}
104 |               >
105 |                 <div className="text-sm font-medium mb-1">{day}</div>
106 |                 <div className="flex-1 overflow-y-auto">
107 |                   {dayTasks.map((task) => (
108 |                     <div
109 |                       key={task.id}
110 |                       onClick={() => onTaskSelect(task.id)}
111 |                       className={`text-xs p-1 mb-1 rounded cursor-pointer
112 |                                 ${task.priority === 'high' ? 'bg-priority-high bg-opacity-20' :
113 |                                   task.priority === 'medium' ? 'bg-priority-medium bg-opacity-20' :
114 |                                   'bg-priority-low bg-opacity-20'}`}
115 |                     >
116 |                       <div className="truncate">{task.title}</div>
117 |                     </div>
118 |                   ))}
119 |                 </div>
120 |               </div>
121 |             );
122 |           })}
123 | 
124 |           {/* Empty cells for days after the last of the month */}
125 |           {Array.from({ length: (7 - ((daysInMonth + firstDayWeekday) % 7)) % 7 }).map((_, index) => (
126 |             <div key={`empty-end-${index}`} className="bg-bg-secondary rounded-lg p-2" />
127 |           ))}
128 |         </div>
129 |       </div>
130 |     </div>
131 |   );
132 | };
133 | 
134 | export default CalendarView;


--------------------------------------------------------------------------------
/app/components/tasks/MindMapNode.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { MindMapNode as MindMapNodeType } from '../../types/mindmap';
  3 | 
  4 | interface MindMapNodeProps {
  5 |   node: MindMapNodeType;
  6 |   onSelect: (id: string) => void;
  7 |   onContentChange: (id: string, content: string) => void;
  8 |   selected: boolean;
  9 |   onCollapse: () => void;
 10 | }
 11 | 
 12 | const MindMapNode: React.FC<MindMapNodeProps> = ({
 13 |   node,
 14 |   onSelect,
 15 |   onContentChange,
 16 |   selected,
 17 |   onCollapse,
 18 | }) => {
 19 |   const [isEditing, setIsEditing] = useState(false);
 20 |   const [editContent, setEditContent] = useState(node.content);
 21 | 
 22 |   const handleDoubleClick = () => {
 23 |     setIsEditing(true);
 24 |   };
 25 | 
 26 |   const handleBlur = () => {
 27 |     setIsEditing(false);
 28 |     onContentChange(node.id, editContent);
 29 |   };
 30 | 
 31 |   const handleKeyDown = (e: React.KeyboardEvent) => {
 32 |     if (e.key === 'Enter') {
 33 |       setIsEditing(false);
 34 |       onContentChange(node.id, editContent);
 35 |     }
 36 |   };
 37 | 
 38 |   // Prevent node click when editing
 39 |   const handleEditorClick = (e: React.MouseEvent) => {
 40 |     e.stopPropagation();
 41 |   };
 42 | 
 43 |   return (
 44 |     <g
 45 |       transform={`translate(${node.x || 0},${node.y || 0})`}
 46 |       onClick={() => onSelect(node.id)}
 47 |       onDoubleClick={handleDoubleClick}
 48 |       className="cursor-pointer"
 49 |     >
 50 |       {/* Node background */}
 51 |       <rect
 52 |         x="-80"
 53 |         y="-25"
 54 |         width="160"
 55 |         height="50"
 56 |         rx="25"
 57 |         className={`${
 58 |           selected
 59 |             ? 'fill-accent-primary stroke-accent-primary'
 60 |             : node.status === 'task'
 61 |             ? 'fill-accent-secondary stroke-accent-secondary'
 62 |             : 'fill-bg-secondary stroke-border-default'
 63 |         }`}
 64 |       />
 65 |       {/* Inner shadow/highlight for depth */}
 66 |       <rect
 67 |         x="-78"
 68 |         y="-23"
 69 |         width="156"
 70 |         height="40"
 71 |         rx="20"
 72 |         className={`${
 73 |           selected
 74 |             ? 'fill-accent-primary stroke-accent-primary'
 75 |             : node.status === 'task'
 76 |             ? 'fill-accent-secondary stroke-accent-secondary'
 77 |             : 'fill-bg-secondary stroke-border-default'
 78 |         } opacity-50`}
 79 |       />
 80 | 
 81 |       {/* Node content */}
 82 |       {isEditing ? (
 83 |         <foreignObject 
 84 |           x="-75" 
 85 |           y="-20" 
 86 |           width="150" 
 87 |           height="40"
 88 |           onClick={handleEditorClick}
 89 |         >
 90 |           <input
 91 |             type="text"
 92 |             value={editContent}
 93 |             onChange={(e) => setEditContent(e.target.value)}
 94 |             onBlur={handleBlur}
 95 |             onKeyDown={handleKeyDown}
 96 |             className="w-full h-full bg-transparent border-none outline-none text-center text-sm px-2"
 97 |             autoFocus
 98 |           />
 99 |         </foreignObject>
100 |       ) : (
101 |         <>
102 |           <text
103 |             textAnchor="middle"
104 |             dominantBaseline="middle"
105 |             className={`${
106 |               selected || node.status === 'task' ? 'fill-white' : 'fill-text-primary'
107 |             } text-sm font-medium`}
108 |           >
109 |             {node.content}
110 |           </text>
111 |           {/* Task indicator */}
112 |           {node.status === 'task' && (
113 |             <g transform="translate(-70, -18)">
114 |               <rect
115 |                 width="16"
116 |                 height="16"
117 |                 rx="3"
118 |                 className="fill-white opacity-20"
119 |               />
120 |               <path
121 |                 d="M3 8l3.5 3.5L12 5"
122 |                 className="stroke-white stroke-2"
123 |                 fill="none"
124 |               />
125 |             </g>
126 |           )}
127 |           {/* Collapse/Expand indicator */}
128 |           {node.children.length > 0 && (
129 |             <g
130 |               transform="translate(70, -18)"
131 |               onClick={(e) => {
132 |                 e.stopPropagation();
133 |                 onCollapse();
134 |               }}
135 |               className="cursor-pointer hover:opacity-80"
136 |             >
137 |               <rect
138 |                 width="16"
139 |                 height="16"
140 |                 rx="3"
141 |                 className={`${node.isCollapsed ? 'fill-accent-primary' : 'fill-white opacity-20'}`}
142 |               />
143 |               <path
144 |                 d={node.isCollapsed ? 'M4 8h8' : 'M4 8h8 M8 4v8'}
145 |                 className="stroke-white stroke-2"
146 |                 strokeLinecap="round"
147 |               />
148 |             </g>
149 |           )}
150 |         </>
151 |       )}
152 |     </g>
153 |   );
154 | };
155 | 
156 | export default MindMapNode;


--------------------------------------------------------------------------------
/app/components/tasks/MindMapView.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState, useCallback } from 'react';
  2 | import { MindMap, MindMapNode, MindMapHistory } from '../../types/mindmap';
  3 | import { Task } from '../../types/task';
  4 | import MindMapNodeComponent from './MindMapNode';
  5 | 
  6 | interface MindMapViewProps {
  7 |   tasks: Task[];
  8 |   onTaskSelect: (taskId: string) => void;
  9 |   onTaskCreate: (task: Partial<Task>) => void;
 10 | }
 11 | 
 12 | const MindMapView: React.FC<MindMapViewProps> = ({
 13 |   tasks,
 14 |   onTaskSelect,
 15 |   onTaskCreate,
 16 | }) => {
 17 |   // Constants
 18 |   const MINDMAP_STORAGE_KEY = 'adhd-panel-mindmap';
 19 |   const MAX_HISTORY_STEPS = 50;
 20 | 
 21 |   // Default mind map structure
 22 |   const defaultMindMap: MindMap = {
 23 |     id: 'default',
 24 |     name: 'Task Planning',
 25 |     rootId: 'root',
 26 |     nodes: {
 27 |       root: {
 28 |         id: 'root',
 29 |         parentId: null,
 30 |         content: 'Main Goal',
 31 |         children: [],
 32 |         status: 'idea',
 33 |         isCollapsed: false
 34 |       }
 35 |     }
 36 |   };
 37 | 
 38 |   // History management
 39 |   const [history, setHistory] = useState<MindMapHistory>({
 40 |     past: [],
 41 |     present: defaultMindMap,
 42 |     future: [],
 43 |     maxSteps: MAX_HISTORY_STEPS
 44 |   });
 45 | 
 46 |   // View state
 47 |   const svgRef = useRef<SVGSVGElement>(null);
 48 |   const [selectedNode, setSelectedNode] = useState<string | null>(null);
 49 |   const [zoom, setZoom] = useState(1);
 50 |   const [pan, setPan] = useState({ x: 0, y: 0 });
 51 |   const [isDragging, setIsDragging] = useState(false);
 52 |   const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
 53 |   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
 54 | 
 55 |   // Get current mindMap from history
 56 |   const mindMap = history.present;
 57 | 
 58 |   // Update mindMap through history management
 59 |   const updateMindMap = useCallback((newMindMap: MindMap) => {
 60 |     setHistory(prev => ({
 61 |       past: [...prev.past, prev.present].slice(-MAX_HISTORY_STEPS),
 62 |       present: newMindMap,
 63 |       future: [],
 64 |       maxSteps: MAX_HISTORY_STEPS
 65 |     }));
 66 |   }, []);
 67 | 
 68 |   // Undo/Redo functions
 69 |   const undo = useCallback(() => {
 70 |     setHistory(prev => {
 71 |       if (prev.past.length === 0) return prev;
 72 |       const newPast = prev.past.slice(0, -1);
 73 |       const newPresent = prev.past[prev.past.length - 1];
 74 |       return {
 75 |         past: newPast,
 76 |         present: newPresent,
 77 |         future: [prev.present, ...prev.future],
 78 |         maxSteps: MAX_HISTORY_STEPS
 79 |       };
 80 |     });
 81 |   }, []);
 82 | 
 83 |   const redo = useCallback(() => {
 84 |     setHistory(prev => {
 85 |       if (prev.future.length === 0) return prev;
 86 |       const [newPresent, ...newFuture] = prev.future;
 87 |       return {
 88 |         past: [...prev.past, prev.present],
 89 |         present: newPresent,
 90 |         future: newFuture,
 91 |         maxSteps: MAX_HISTORY_STEPS
 92 |       };
 93 |     });
 94 |   }, []);
 95 | 
 96 |   // Load mind map data on mount
 97 |   useEffect(() => {
 98 |     const validateMindMap = (map: unknown): map is MindMap => {
 99 |       if (!map || typeof map !== 'object' || map === null) return false;
100 |       
101 |       const mindMap = map as Record<string, unknown>;
102 |       
103 |       if (typeof mindMap.id !== 'string') return false;
104 |       if (typeof mindMap.name !== 'string') return false;
105 |       if (typeof mindMap.rootId !== 'string') return false;
106 |       if (!mindMap.nodes || typeof mindMap.nodes !== 'object') return false;
107 |       
108 |       // Validate each node
109 |       const nodes = mindMap.nodes as Record<string, unknown>;
110 |       
111 |       for (const nodeId in nodes) {
112 |         const node = nodes[nodeId] as Record<string, unknown>;
113 |         if (!node || typeof node !== 'object' || node === null) return false;
114 |         
115 |         if (typeof node.id !== 'string' ||
116 |             (node.parentId !== null && typeof node.parentId !== 'string') ||
117 |             typeof node.content !== 'string' ||
118 |             !Array.isArray(node.children)) return false;
119 |             
120 |         const status = node.status as string;
121 |         const validStatus = ['idea', 'task', 'completed'].includes(status);
122 |         if (!validStatus) return false;
123 |       }
124 | 
125 |       return true;
126 |     };
127 | 
128 |     const loadMindMap = () => {
129 |       const stored = localStorage.getItem(MINDMAP_STORAGE_KEY);
130 |       if (stored) {
131 |         try {
132 |           const parsed = JSON.parse(stored);
133 |           if (validateMindMap(parsed)) {
134 |             setHistory({ past: [], present: parsed, future: [], maxSteps: MAX_HISTORY_STEPS });
135 |           } else {
136 |             console.error('Invalid mind map structure in storage');
137 |             setHistory({ past: [], present: defaultMindMap, future: [], maxSteps: MAX_HISTORY_STEPS });
138 |           }
139 |         } catch (error) {
140 |           console.error('Error parsing mind map from storage:', error);
141 |           setHistory({ past: [], present: defaultMindMap, future: [], maxSteps: MAX_HISTORY_STEPS });
142 |         }
143 |       }
144 |     };
145 |     loadMindMap();
146 |   }, []);
147 | 
148 |   // Save mind map data on changes
149 |   useEffect(() => {
150 |     localStorage.setItem(MINDMAP_STORAGE_KEY, JSON.stringify(mindMap));
151 |   }, [mindMap]);
152 | 
153 |   // Add existing tasks as nodes
154 |   useEffect(() => {
155 |     const newNodes = { ...mindMap.nodes };
156 |     let hasChanges = false;
157 | 
158 |     tasks.forEach(task => {
159 |       if (!newNodes[`task-${task.id}`]) {
160 |         hasChanges = true;
161 |         newNodes[`task-${task.id}`] = {
162 |           id: `task-${task.id}`,
163 |           parentId: mindMap.rootId,
164 |           content: task.title,
165 |           children: [],
166 |           status: 'task',
167 |           isCollapsed: false,
168 |           taskId: task.id
169 |         };
170 |         newNodes[mindMap.rootId].children.push(`task-${task.id}`);
171 |       }
172 |     });
173 | 
174 |     if (hasChanges) {
175 |       updateMindMap({ ...mindMap, nodes: newNodes });
176 |     }
177 |   }, [tasks, mindMap, updateMindMap]);
178 | 
179 |   // Handle zooming
180 |   const handleWheel = (e: React.WheelEvent) => {
181 |     e.preventDefault();
182 |     const delta = -e.deltaY * 0.001;
183 |     setZoom(prevZoom => Math.min(Math.max(0.1, prevZoom + delta), 2));
184 |   };
185 | 
186 |   // Handle panning
187 |   const handleMouseDown = (e: React.MouseEvent) => {
188 |     if (e.button === 1 || e.button === 0) { // Middle mouse or left click
189 |       setIsDragging(true);
190 |       setDragStart({ x: e.clientX, y: e.clientY });
191 |     }
192 |   };
193 | 
194 |   const handleMouseMove = (e: React.MouseEvent) => {
195 |     if (isDragging) {
196 |       const dx = e.clientX - dragStart.x;
197 |       const dy = e.clientY - dragStart.y;
198 |       setDragOffset({ x: dx, y: dy });
199 |     }
200 |   };
201 | 
202 |   const handleMouseUp = () => {
203 |     if (isDragging) {
204 |       setPan(prev => ({
205 |         x: prev.x + dragOffset.x,
206 |         y: prev.y + dragOffset.y
207 |       }));
208 |       setIsDragging(false);
209 |       setDragOffset({ x: 0, y: 0 });
210 |     }
211 |   };
212 | 
213 |   // Reset view to center
214 |   const resetView = () => {
215 |     setZoom(1);
216 |     setPan({ x: 0, y: 0 });
217 |     setDragOffset({ x: 0, y: 0 });
218 |   };
219 | 
220 |   const handleNodeSelect = (nodeId: string) => {
221 |     setSelectedNode(nodeId);
222 |     const node = mindMap.nodes[nodeId];
223 |     if (node.taskId) onTaskSelect(node.taskId);
224 |   };
225 | 
226 |   // Reset mind map to default
227 |   const resetMindMap = () => {
228 |     if (window.confirm('Are you sure you want to reset the mind map? This will clear all your ideas.')) {
229 |       updateMindMap(defaultMindMap);
230 |       resetView();
231 |       setSelectedNode(null);
232 |     }
233 |   };
234 | 
235 |   const addNode = (parentId: string) => {
236 |     const newNode: MindMapNode = {
237 |       id: `node-${Date.now()}`,
238 |       parentId,
239 |       content: 'New Idea',
240 |       children: [],
241 |       status: 'idea',
242 |       isCollapsed: false
243 |     };
244 | 
245 |     const parent = mindMap.nodes[parentId];
246 |     const newMindMap = {
247 |       ...mindMap,
248 |       nodes: {
249 |         ...mindMap.nodes,
250 |         [parentId]: {
251 |           ...parent,
252 |           children: [...parent.children, newNode.id]
253 |         },
254 |         [newNode.id]: newNode
255 |       }
256 |     };
257 | 
258 |     updateMindMap(newMindMap);
259 |   };
260 | 
261 |   const convertToTask = (nodeId: string) => {
262 |     const node = mindMap.nodes[nodeId];
263 |     const newTask: Partial<Task> = {
264 |       title: node.content,
265 |       status: 'todo',
266 |       description: '',
267 |     };
268 |     onTaskCreate(newTask);
269 |   };
270 | 
271 |   const updateNodeContent = (nodeId: string, content: string) => {
272 |     const newMindMap = {
273 |       ...mindMap,
274 |       nodes: {
275 |         ...mindMap.nodes,
276 |         [nodeId]: {
277 |           ...mindMap.nodes[nodeId],
278 |           content
279 |         }
280 |       }
281 |     };
282 |     updateMindMap(newMindMap);
283 |   };
284 | 
285 |   const toggleNodeCollapse = useCallback((nodeId: string) => {
286 |     const newMindMap = {
287 |       ...mindMap,
288 |       nodes: {
289 |         ...mindMap.nodes,
290 |         [nodeId]: {
291 |           ...mindMap.nodes[nodeId],
292 |           isCollapsed: !mindMap.nodes[nodeId].isCollapsed
293 |         }
294 |       }
295 |     };
296 |     updateMindMap(newMindMap);
297 |   }, [mindMap, updateMindMap]);
298 | 
299 |   // Layout calculation with centered root
300 |   const calculateLayout = useCallback(() => {
301 |     const nodeWidth = 160;
302 |     const verticalSpacing = 50;
303 |     const levelHeight = 100;
304 |     const levelWidths: { [key: string]: number } = {};
305 |     const levels: { [key: string]: string[] } = {};
306 | 
307 |     // Calculate levels for each node
308 |     const assignLevels = (nodeId: string, level: number) => {
309 |       if (!levels[level]) levels[level] = [];
310 |       levels[level].push(nodeId);
311 | 
312 |       const node = mindMap.nodes[nodeId];
313 |       if (!node || !node.children) return;
314 | 
315 |       // Only process children if node is not collapsed
316 |       if (!node.isCollapsed) {
317 |         node.children.forEach(childId => assignLevels(childId, level + 1));
318 |       }
319 |     };
320 | 
321 |     assignLevels(mindMap.rootId, 0);
322 | 
323 |     // Calculate x positions for nodes at each level
324 |     Object.entries(levels).forEach(([level, nodeIds]) => {
325 |       const levelWidth = nodeIds.length * nodeWidth;
326 |       levelWidths[level] = levelWidth;
327 |       
328 |       const startX = -(levelWidth / 2);
329 |       nodeIds.forEach((nodeId, index) => {
330 |         if (!mindMap.nodes[nodeId]) return;
331 |         const node = mindMap.nodes[nodeId];
332 |         node.x = startX + (index * nodeWidth) + (nodeWidth / 2);
333 |         node.y = Number(level) * (levelHeight + verticalSpacing);
334 |       });
335 |     });
336 |   }, [mindMap]);
337 | 
338 |   // Run layout calculation when mindMap changes
339 |   useEffect(() => {
340 |     calculateLayout();
341 |   }, [calculateLayout]);
342 | 
343 |   // Initial centering
344 |   useEffect(() => {
345 |     if (svgRef.current) {
346 |       setPan({
347 |         x: (window.innerWidth / 2),
348 |         y: (window.innerHeight / 3)
349 |       });
350 |     }
351 |   }, []);
352 | 
353 |   // Keyboard shortcuts
354 |   useEffect(() => {
355 |     const handleKeyDown = (e: KeyboardEvent) => {
356 |       if (e.target instanceof HTMLInputElement) return;
357 | 
358 |       if (e.ctrlKey || e.metaKey) {
359 |         const key = e.key.toLowerCase();
360 |         if (key === 'z') {
361 |           if (e.shiftKey) {
362 |             e.preventDefault();
363 |             redo();
364 |           } else {
365 |             e.preventDefault();
366 |             undo();
367 |           }
368 |         } else if (key === 'y') {
369 |           e.preventDefault();
370 |           redo();
371 |         }
372 |       } else if (selectedNode && e.key === ' ') {
373 |         e.preventDefault();
374 |         toggleNodeCollapse(selectedNode);
375 |       }
376 |     };
377 | 
378 |     window.addEventListener('keydown', handleKeyDown);
379 |     return () => window.removeEventListener('keydown', handleKeyDown);
380 |   }, [selectedNode, undo, redo, toggleNodeCollapse]);
381 | 
382 |   return (
383 |     <div 
384 |       className="h-full w-full bg-bg-secondary relative overflow-hidden"
385 |       onWheel={handleWheel}
386 |       onMouseDown={handleMouseDown}
387 |       onMouseMove={handleMouseMove}
388 |       onMouseUp={handleMouseUp}
389 |       onMouseLeave={handleMouseUp}
390 |     >
391 |       <svg
392 |         ref={svgRef}
393 |         className="w-full h-full"
394 |         style={{
395 |           transform: `translate(${pan.x + dragOffset.x}px, ${pan.y + dragOffset.y}px) scale(${zoom})`
396 |         }}
397 |         viewBox="-500 -500 1000 1000"
398 |         preserveAspectRatio="xMidYMid meet"
399 |       >
400 |         {/* Render connections */}
401 |         {Object.values(mindMap.nodes).map(node => (
402 |           node.parentId && !mindMap.nodes[node.parentId].isCollapsed && (
403 |             <line
404 |               key={`line-${node.id}`}
405 |               x1={mindMap.nodes[node.parentId].x || 0}
406 |               y1={(mindMap.nodes[node.parentId].y || 0) + 20}
407 |               x2={node.x || 0}
408 |               y2={(node.y || 0) - 20}
409 |               stroke="currentColor"
410 |               strokeWidth="2"
411 |               className="opacity-30"
412 |             />
413 |           )
414 |         ))}
415 |         
416 |         {/* Render nodes */}
417 |         {Object.values(mindMap.nodes).map(node => (
418 |           <MindMapNodeComponent
419 |             key={node.id}
420 |             node={node}
421 |             selected={selectedNode === node.id}
422 |             onSelect={handleNodeSelect}
423 |             onContentChange={updateNodeContent}
424 |             onCollapse={() => toggleNodeCollapse(node.id)}
425 |           />
426 |         ))}
427 |       </svg>
428 |       
429 |       {/* Controls */}
430 |       <div className="absolute bottom-4 right-4 flex flex-col gap-2 bg-black/20 backdrop-blur p-4 rounded-lg shadow-lg">
431 |         <div className="flex gap-2">
432 |           <button
433 |             onClick={() => setZoom(prev => Math.min(prev + 0.1, 2))}
434 |             className="bg-accent-primary text-white px-3 py-2 rounded-md"
435 |             title="Zoom In"
436 |           >
437 |             <span className="text-xl">+</span>
438 |           </button>
439 |           <button
440 |             onClick={() => setZoom(prev => Math.max(prev - 0.1, 0.1))}
441 |             className="bg-accent-primary text-white px-3 py-2 rounded-md"
442 |             title="Zoom Out"
443 |           >
444 |             <span className="text-xl">-</span>
445 |           </button>
446 |           <button
447 |             onClick={resetView}
448 |             className="bg-accent-primary text-white px-3 py-2 rounded-md"
449 |             title="Reset View"
450 |           >
451 |             <span className="text-sm">Reset View</span>
452 |           </button>
453 |           <button
454 |             onClick={resetMindMap}
455 |             className="bg-red-500 text-white px-3 py-2 rounded-md"
456 |             title="Reset Mind Map"
457 |           >
458 |             <span className="text-sm">Reset Map</span>
459 |           </button>
460 |         </div>
461 |         <div className="flex gap-2">
462 |           <button
463 |             onClick={() => selectedNode && addNode(selectedNode)}
464 |             className="bg-accent-primary text-white px-4 py-2 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
465 |             disabled={!selectedNode}
466 |           >
467 |             Add Idea
468 |           </button>
469 |           <button
470 |             onClick={() => selectedNode && convertToTask(selectedNode)}
471 |             className="bg-accent-secondary text-white px-4 py-2 rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
472 |             disabled={!selectedNode || mindMap.nodes[selectedNode].status === 'task'}
473 |           >
474 |             Convert to Task
475 |           </button>
476 |         </div>
477 |       </div>
478 |       <div className="absolute top-4 left-4 text-sm text-text-secondary">
479 |         Click and drag to pan • Scroll to zoom • Click node to select • Double-click to edit • Press Space to collapse/expand
480 |         <br />
481 |         Ctrl+Z to undo • Ctrl+Shift+Z/Ctrl+Y to redo • Press Enter to save edit • Existing tasks shown as nodes
482 |       </div>
483 |       <div className="absolute top-4 right-4 text-sm text-text-secondary">
484 |         Mind map data is saved automatically
485 |       </div>
486 |     </div>
487 |   );
488 | };
489 | 
490 | export default MindMapView;


--------------------------------------------------------------------------------
/app/components/tasks/TaskContextMenu.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useRef, useEffect } from 'react';
 2 | 
 3 | interface TaskContextMenuProps {
 4 |   isOpen: boolean;
 5 |   onClose: () => void;
 6 |   onDelete: () => void;
 7 |   anchorEl: HTMLElement | null;
 8 | }
 9 | 
10 | const TaskContextMenu: React.FC<TaskContextMenuProps> = ({
11 |   isOpen,
12 |   onClose,
13 |   onDelete,
14 |   anchorEl,
15 | }) => {
16 |   const menuRef = useRef<HTMLDivElement>(null);
17 | 
18 |   useEffect(() => {
19 |     const handleClickOutside = (event: MouseEvent) => {
20 |       if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
21 |         onClose();
22 |       }
23 |     };
24 | 
25 |     if (isOpen) {
26 |       document.addEventListener('mousedown', handleClickOutside);
27 |     }
28 | 
29 |     return () => {
30 |       document.removeEventListener('mousedown', handleClickOutside);
31 |     };
32 |   }, [isOpen, onClose]);
33 | 
34 |   if (!isOpen || !anchorEl) return null;
35 | 
36 |   const rect = anchorEl.getBoundingClientRect();
37 |   const menuStyle = {
38 |     position: 'fixed' as const,
39 |     top: `${rect.bottom + 5}px`,
40 |     right: `${window.innerWidth - rect.right}px`,
41 |   };
42 | 
43 |   return (
44 |     <div
45 |       ref={menuRef}
46 |       className="bg-bg-secondary border border-border-default rounded-lg shadow-lg py-1 z-50"
47 |       style={menuStyle}
48 |     >
49 |       <button
50 |         onClick={() => {
51 |           onDelete();
52 |           onClose();
53 |         }}
54 |         className="w-full px-4 py-2 text-left text-sm hover:bg-bg-tertiary text-text-destructive
55 |                  transition-colors duration-200 flex items-center gap-2"
56 |       >
57 |         <svg
58 |           className="w-4 h-4"
59 |           fill="none"
60 |           stroke="currentColor"
61 |           viewBox="0 0 24 24"
62 |         >
63 |           <path
64 |             strokeLinecap="round"
65 |             strokeLinejoin="round"
66 |             strokeWidth={2}
67 |             d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
68 |           />
69 |         </svg>
70 |         Delete Task
71 |       </button>
72 |     </div>
73 |   );
74 | };
75 | 
76 | export default TaskContextMenu;


--------------------------------------------------------------------------------
/app/components/tasks/TaskDetailPanel.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React from 'react';
  4 | import { Task } from '../../types/task';
  5 | import { Category } from '../../types/category';
  6 | import { useCategories } from '../../hooks/useCategories';
  7 | import CategoryModal from '../categories/CategoryModal';
  8 | import { debounce } from 'lodash';
  9 | 
 10 | interface TaskDetailPanelProps {
 11 |   task: Task | null;
 12 |   onClose: () => void;
 13 |   onSave: (task: Task) => void;
 14 |   onDelete: (taskId: string) => void;
 15 | }
 16 | 
 17 | const TaskDetailPanel: React.FC<TaskDetailPanelProps> = ({
 18 |   task,
 19 |   onClose,
 20 |   onSave,
 21 |   onDelete,
 22 | }) => {
 23 |   // Add confirmation dialog when closing with unsaved changes
 24 |   const handleClose = () => {
 25 |     if (isDirty) {
 26 |       const confirmed = window.confirm(
 27 |         'You have unsaved changes. Are you sure you want to close?'
 28 |       );
 29 |       if (!confirmed) {
 30 |         return;
 31 |       }
 32 |       // Reset form data to original state
 33 |       if (originalTaskRef.current) {
 34 |         setFormData(originalTaskRef.current);
 35 |       }
 36 |     }
 37 |     onClose();
 38 |   };
 39 |   const [formData, setFormData] = React.useState<Partial<Task>>(task || {});
 40 |   const [isDirty, setIsDirty] = React.useState(false);
 41 |   const [isSaving, setIsSaving] = React.useState(false);
 42 |   const [saveStatus, setSaveStatus] = React.useState<'saved' | 'error' | null>(null);
 43 |   const [newTag, setNewTag] = React.useState('');
 44 |   const [isCategoryModalOpen, setIsCategoryModalOpen] = React.useState(false);
 45 |   const { categories, addCategory } = useCategories();
 46 |   const [errors, setErrors] = React.useState<Record<string, string>>({});
 47 |   
 48 |   // Create a ref to store the original task data
 49 |   const originalTaskRef = React.useRef<Task | null>(null);
 50 | 
 51 |   // Update form data when task changes
 52 |   React.useEffect(() => {
 53 |     if (task) {
 54 |       setFormData(task);
 55 |       originalTaskRef.current = task;
 56 |       setIsDirty(false);
 57 |       setErrors({});
 58 |       setSaveStatus(null);
 59 |     }
 60 |   }, [task]);
 61 | 
 62 |   // Implement auto-save functionality
 63 |   const debouncedSave = React.useMemo(
 64 |     () =>
 65 |       debounce(async (data: Task) => {
 66 |         try {
 67 |           setIsSaving(true);
 68 |           await onSave(data);
 69 |           setSaveStatus('saved');
 70 |           setIsDirty(false);
 71 |         } catch (error) {
 72 |           console.error('Error saving task:', error);
 73 |           setSaveStatus('error');
 74 |         } finally {
 75 |           setIsSaving(false);
 76 |         }
 77 |       }, 1000),
 78 |     [onSave]
 79 |   );
 80 | 
 81 |   // Cleanup debounced function
 82 |   React.useEffect(() => {
 83 |     return () => {
 84 |       debouncedSave.cancel();
 85 |     };
 86 |   }, [debouncedSave]);
 87 | 
 88 |   const handleChange = (
 89 |     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
 90 |   ) => {
 91 |     const { name, value } = e.target;
 92 |     setFormData((prev) => {
 93 |       const newData = { ...prev, [name]: value };
 94 |       // Only trigger auto-save if the form is valid
 95 |       if (validateForm(newData)) {
 96 |         if (task) {
 97 |           debouncedSave({ ...task, ...newData });
 98 |         }
 99 |       }
100 |       return newData;
101 |     });
102 |     setIsDirty(true);
103 |     setSaveStatus(null);
104 |     
105 |     // Clear error when field is modified
106 |     if (errors[name]) {
107 |       setErrors((prev) => {
108 |         const newErrors = { ...prev };
109 |         delete newErrors[name];
110 |         return newErrors;
111 |       });
112 |     }
113 |   };
114 | 
115 |   const validateForm = (data: Partial<Task> = formData): boolean => {
116 |     const newErrors: Record<string, string> = {};
117 | 
118 |     if (!data.title?.trim()) {
119 |       newErrors.title = 'Title is required';
120 |     }
121 | 
122 |     if (data.startDate && data.dueDate) {
123 |       const start = new Date(data.startDate);
124 |       const due = new Date(data.dueDate);
125 |       if (due < start) {
126 |         newErrors.dueDate = 'Due date cannot be before start date';
127 |       }
128 |     }
129 | 
130 |     // Add validation for progress
131 |     if (data.progress !== undefined && (data.progress < 0 || data.progress > 100)) {
132 |       newErrors.progress = 'Progress must be between 0 and 100';
133 |     }
134 | 
135 |     setErrors(newErrors);
136 |     return Object.keys(newErrors).length === 0;
137 |   };
138 | 
139 |   const handleAddTag = () => {
140 |     if (newTag.trim() && !formData.tags?.includes(newTag.trim())) {
141 |       setFormData((prev) => {
142 |         const newData = {
143 |           ...prev,
144 |           tags: [...(prev.tags || []), newTag.trim()],
145 |         };
146 |         if (task && validateForm(newData)) {
147 |           debouncedSave({ ...task, ...newData });
148 |         }
149 |         return newData;
150 |       });
151 |       setNewTag('');
152 |       setIsDirty(true);
153 |       setSaveStatus(null);
154 |     }
155 |   };
156 | 
157 |   const handleRemoveTag = (tagToRemove: string) => {
158 |     setFormData((prev) => {
159 |       const newData = {
160 |         ...prev,
161 |         tags: prev.tags?.filter((tag) => tag !== tagToRemove),
162 |       };
163 |       if (task && validateForm(newData)) {
164 |         debouncedSave({ ...task, ...newData });
165 |       }
166 |       return newData;
167 |     });
168 |     setIsDirty(true);
169 |     setSaveStatus(null);
170 |   };
171 | 
172 |   const handleSubmit = async (e: React.FormEvent) => {
173 |     e.preventDefault();
174 |     if (validateForm() && task) {
175 |       try {
176 |         setIsSaving(true);
177 |         await onSave({ ...task, ...formData });
178 |         setSaveStatus('saved');
179 |         setIsDirty(false);
180 |       } catch (error) {
181 |         console.error('Error saving task:', error);
182 |         setSaveStatus('error');
183 |       } finally {
184 |         setIsSaving(false);
185 |       }
186 |     }
187 |   };
188 | 
189 |   const handleNewCategory = async (categoryData: Omit<Category, 'id' | 'createdAt' | 'updatedAt'>) => {
190 |     try {
191 |       const newCategory = await addCategory(categoryData);
192 |       setFormData(prev => {
193 |         const newData = { ...prev, category: newCategory.id };
194 |         if (task && validateForm(newData)) {
195 |           debouncedSave({ ...task, ...newData });
196 |         }
197 |         return newData;
198 |       });
199 |       setIsDirty(true);
200 |       setSaveStatus(null);
201 |       setIsCategoryModalOpen(false);
202 |     } catch (error) {
203 |       console.error('Error creating category:', error);
204 |     }
205 |   };
206 | 
207 |   if (!task) {
208 |     return (
209 |       <div className="h-full flex items-center justify-center text-text-secondary p-6 text-center">
210 |         <div>
211 |           <svg className="w-16 h-16 mx-auto mb-4 text-text-disabled" fill="none" stroke="currentColor" viewBox="0 0 24 24">
212 |             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
213 |                   d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
214 |           </svg>
215 |           <p className="text-lg mb-2">No Task Selected</p>
216 |           <p className="text-sm">Select a task from the list to view and edit its details</p>
217 |         </div>
218 |       </div>
219 |     );
220 |   }
221 | 
222 |   return (
223 |     <div className="h-full flex flex-col">
224 |       {/* Header */}
225 |       <div className="flex items-center justify-between px-6 py-4 border-b border-border-default bg-bg-secondary">
226 |         <div className="space-y-1">
227 |           <h2 className="text-2xl font-bold tracking-tight text-text-primary">Task Details</h2>
228 |           <div className="text-sm text-text-secondary">
229 |             {isSaving && 'Saving...'}
230 |             {saveStatus === 'saved' && 'All changes saved'}
231 |             {saveStatus === 'error' && 'Error saving changes'}
232 |             {isDirty && !isSaving && !saveStatus && 'Unsaved changes'}
233 |           </div>
234 |         </div>
235 |         <button
236 |           onClick={handleClose}
237 |           className="p-2 hover:bg-hover rounded-md text-text-secondary 
238 |                    hover:text-text-primary transition-colors duration-200"
239 |           aria-label="Close panel"
240 |         >
241 |           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
242 |             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
243 |           </svg>
244 |         </button>
245 |       </div>
246 | 
247 |       {/* Task Form */}
248 |       <div className="flex-1 overflow-y-auto p-6">
249 |         <form className="max-w-3xl mx-auto space-y-8" onSubmit={handleSubmit}>
250 |           {/* Title */}
251 |           <div className="space-y-2">
252 |             <label htmlFor="title" className="block text-sm font-medium text-text-primary">
253 |               Title <span className="text-priority-high">*</span>
254 |             </label>
255 |             <input
256 |               id="title"
257 |               name="title"
258 |               type="text"
259 |               value={formData.title || ''}
260 |               onChange={handleChange}
261 |               className={`w-full bg-bg-tertiary border ${
262 |                 errors.title ? 'border-priority-high' : 'border-border-default'
263 |               } rounded-md px-4 py-2.5 text-text-primary focus:outline-none focus:border-accent-primary`}
264 |               placeholder="Task title"
265 |             />
266 |             {errors.title && (
267 |               <p className="text-sm text-priority-high">{errors.title}</p>
268 |             )}
269 |           </div>
270 | 
271 |           {/* Description */}
272 |           <div className="space-y-2">
273 |             <label htmlFor="description" className="block text-sm font-medium text-text-primary">
274 |               Description
275 |             </label>
276 |             <textarea
277 |               id="description"
278 |               name="description"
279 |               value={formData.description || ''}
280 |               onChange={handleChange}
281 |               rows={4}
282 |               className="w-full bg-bg-tertiary border border-border-default rounded-lg px-4 py-3
283 |                      text-text-primary focus:ring-2 focus:ring-accent-primary focus:border-transparent
284 |                      resize-none min-h-[160px] transition-all duration-200"
285 |               placeholder="Add a detailed description..."
286 |             />
287 |           </div>
288 | 
289 |           {/* Category, Priority and Status */}
290 |           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
291 |             <div className="space-y-2">
292 |               <div className="flex items-center justify-between gap-2">
293 |                 <label htmlFor="category" className="block text-sm font-medium text-text-primary">
294 |                   Category
295 |                 </label>
296 |                 <button
297 |                   type="button"
298 |                   onClick={() => setIsCategoryModalOpen(true)}
299 |                   className="text-sm font-medium text-accent-primary hover:text-accent-primary/80 
300 |                          flex items-center gap-1.5"
301 |                 >
302 |                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
303 |                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
304 |                   </svg>
305 |                   + New Category
306 |                 </button>
307 |               </div>
308 |               <select
309 |                 id="category"
310 |                 name="category"
311 |                 value={formData.category || ''}
312 |                 onChange={handleChange}
313 |                 className="w-full bg-bg-tertiary border border-border-default rounded-md px-4 py-2.5
314 |                        text-text-primary focus:outline-none focus:border-accent-primary cursor-pointer"
315 |               >
316 |                 <option value="">No Category</option>
317 |                 {categories.map((category) => (
318 |                   <option key={category.id} value={category.id}>
319 |                     {category.name}
320 |                   </option>
321 |                 ))}
322 |               </select>
323 |             </div>
324 | 
325 |             <div className="space-y-2">
326 |               <label htmlFor="status" className="text-sm font-medium text-text-secondary">
327 |                 Status
328 |               </label>
329 |               <select
330 |                 id="status"
331 |                 name="status"
332 |                 value={formData.status || 'todo'}
333 |                 onChange={handleChange}
334 |                 className="w-full bg-bg-tertiary border border-border-default rounded-md px-4 py-2.5
335 |                        text-text-primary focus:outline-none focus:border-accent-primary cursor-pointer"
336 |               >
337 |                 <option value="todo">To Do</option>
338 |                 <option value="in_progress">In Progress</option>
339 |                 <option value="completed">Completed</option>
340 |               </select>
341 |             </div>
342 |           </div>
343 | 
344 |           {/* Priority and Status */}
345 |           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
346 |             <div className="space-y-2">
347 |               <label htmlFor="priority" className="text-sm font-medium text-text-secondary">
348 |                 Priority
349 |               </label>
350 |               <select
351 |                 id="priority"
352 |                 name="priority"
353 |                 value={formData.priority || 'medium'}
354 |                 onChange={handleChange}
355 |                 className="w-full bg-bg-tertiary border border-border-default rounded-md px-4 py-2.5
356 |                        text-text-primary focus:outline-none focus:border-accent-primary cursor-pointer"
357 |               >
358 |                 <option value="high">High</option>
359 |                 <option value="medium">Medium</option>
360 |                 <option value="low">Low</option>
361 |               </select>
362 |             </div>
363 |           </div>
364 | 
365 |           {/* Dates */}
366 |           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
367 |             <div className="space-y-2">
368 |               <label htmlFor="startDate" className="text-sm font-medium text-text-secondary">
369 |                 Start Date
370 |               </label>
371 |               <input
372 |                 id="startDate"
373 |                 name="startDate"
374 |                 type="date"
375 |                 value={formData.startDate || ''}
376 |                 onChange={handleChange}
377 |                 className="w-full bg-bg-tertiary border border-border-default rounded-md px-4 py-2.5
378 |                        text-text-primary focus:outline-none focus:border-accent-primary cursor-pointer"
379 |               />
380 |             </div>
381 |             <div className="space-y-2">
382 |               <label htmlFor="dueDate" className="text-sm font-medium text-text-secondary">
383 |                 Due Date
384 |               </label>
385 |               <input
386 |                 id="dueDate"
387 |                 name="dueDate"
388 |                 type="date"
389 |                 value={formData.dueDate || ''}
390 |                 onChange={handleChange}
391 |                 className={`w-full bg-bg-tertiary border ${
392 |                   errors.dueDate ? 'border-priority-high' : 'border-border-default'
393 |                 } rounded-md px-4 py-2.5 text-text-primary focus:outline-none focus:border-accent-primary cursor-pointer`}
394 |               />
395 |               {errors.dueDate && (
396 |                 <p className="text-sm text-priority-high">{errors.dueDate}</p>
397 |               )}
398 |             </div>
399 |           </div>
400 | 
401 |           {/* Progress */}
402 |           <div className="space-y-2">
403 |             <label htmlFor="progress" className="text-sm font-medium text-text-secondary">
404 |               Progress
405 |             </label>
406 |             <div className="flex items-center gap-4">
407 |               <input
408 |                 id="progress"
409 |                 name="progress"
410 |                 type="range"
411 |                 min="0"
412 |                 max="100"
413 |                 value={formData.progress || 0}
414 |                 onChange={handleChange}
415 |                 className="flex-1 h-3 rounded-full bg-bg-tertiary accent-accent-primary"
416 |               />
417 |               <div className="relative w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
418 |                 <div 
419 |                   className="absolute h-full transition-all duration-300" 
420 |                   style={{ 
421 |                     width: `${formData.progress || 0}%`,
422 |                     backgroundColor: `hsl(${(formData.progress || 0) * 1.2}, 80%, 50%)`
423 |                   }}
424 |                 />
425 |               </div>
426 |               <span className="text-sm text-text-secondary w-12">
427 |                 {formData.progress || 0}%
428 |               </span>
429 |             </div>
430 |           </div>
431 | 
432 |           {/* Tags */}
433 |           <div className="space-y-2">
434 |             <label className="block text-sm font-medium text-text-primary">Tags</label>
435 |             <div className="flex flex-wrap gap-2 mb-2">
436 |               {formData.tags?.map((tag) => (
437 |                 <span
438 |                   key={tag}
439 |                   className="px-3 py-1.5 rounded-full bg-accent-primary/10 text-accent-primary text-sm flex items-center gap-2 group border border-accent-primary/20 hover:border-accent-primary/40 transition-colors"
440 |                 >
441 |                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
442 |                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5a2 2 0 011.585.379l5 4A2 2 0 0119 9v11a2 2 0 01-2 2H7a2 2 0 01-2-2V5a2 2 0 012-2z" />
443 |                   </svg>
444 |                   {tag}
445 |                   <button
446 |                     type="button"
447 |                     onClick={() => handleRemoveTag(tag)}
448 |                     className="text-text-secondary opacity-50 group-hover:opacity-100 hover:text-priority-high"
449 |                   >
450 |                     ×
451 |                   </button>
452 |                 </span>
453 |               ))}
454 |             </div>
455 |             <div className="flex gap-2">
456 |               <input
457 |                 type="text"
458 |                 value={newTag}
459 |                 onChange={(e) => setNewTag(e.target.value)}
460 |                 placeholder="Add a tag"
461 |                 className="flex-1 bg-bg-tertiary border border-border-default rounded-md px-4 py-2.5
462 |                        text-text-primary focus:outline-none focus:border-accent-primary text-sm min-w-0"
463 |                 onKeyPress={(e) => {
464 |                   if (e.key === 'Enter') {
465 |                     e.preventDefault();
466 |                     handleAddTag();
467 |                   }
468 |                 }}
469 |               />
470 |               <button
471 |                 type="button"
472 |                 onClick={handleAddTag}
473 |                 className="px-4 py-2.5 rounded-md bg-bg-tertiary border border-border-default
474 |                        text-text-secondary hover:text-text-primary hover:border-accent-primary
475 |                        focus:outline-none focus:border-accent-primary text-sm"
476 |               >
477 |                 Add
478 |               </button>
479 |             </div>
480 |           </div>
481 |         </form>
482 |       </div>
483 | 
484 |       {/* Action Buttons */}
485 |       <div className="sticky bottom-0 px-6 py-4 border-t border-border-default bg-bg-secondary/80 backdrop-blur-sm">
486 |         <div className="flex items-center gap-4 max-w-3xl mx-auto">
487 |           <button
488 |             type="submit"
489 |             onClick={handleSubmit}
490 |             disabled={!isDirty || isSaving}
491 |             className={`flex-1 py-2.5 px-6 rounded-md text-sm font-medium ${
492 |               isDirty && !isSaving
493 |                 ? 'bg-accent-primary text-white hover:bg-opacity-90'
494 |                 : 'bg-bg-tertiary text-text-disabled cursor-not-allowed'
495 |             } transition-colors duration-200`}
496 |           >
497 |             {isSaving ? 'Saving...' : 'Save Changes'}
498 |           </button>
499 |           <button
500 |             type="button"
501 |             onClick={() => {
502 |               if (task?.id && window.confirm('Are you sure you want to delete this task?')) {
503 |                 onDelete(task.id);
504 |                 onClose();
505 |               }
506 |             }}
507 |             className="py-2.5 px-6 rounded-md border border-priority-high/20 text-priority-high text-sm font-medium hover:bg-priority-high/10 transition-colors duration-200"
508 |           >
509 |             Delete Task
510 |           </button>
511 |           <button
512 |             type="button"
513 |             onClick={handleClose}
514 |             className="py-2.5 px-6 rounded-md border border-border-default text-text-secondary text-sm font-medium
515 |                    hover:bg-hover transition-colors duration-200"
516 |           >
517 |             Close
518 |           </button>
519 |         </div>
520 |         
521 |         {/* Category Modal */}
522 |         <CategoryModal
523 |           isOpen={isCategoryModalOpen}
524 |           onClose={() => setIsCategoryModalOpen(false)}
525 |           onSave={handleNewCategory}
526 |           initialData={{}}
527 |         />
528 |       </div>
529 |     </div>
530 |   );
531 | };
532 | 
533 | export default TaskDetailPanel;


--------------------------------------------------------------------------------
/app/components/tasks/TaskList.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React from 'react';
  4 | import { Task } from '../../types/task';
  5 | import TaskContextMenu from './TaskContextMenu';
  6 | 
  7 | interface TaskListProps {
  8 |   tasks: Task[];
  9 |   onTaskSelect: (taskId: string) => void;
 10 |   onTaskStatusChange: (taskId: string, status: Task['status']) => void;
 11 |   onNewTask?: () => void;
 12 |   onTaskDelete?: (taskId: string) => void;
 13 | }
 14 | 
 15 | const getPriorityColor = (priority: Task['priority']) => {
 16 |   const colors = {
 17 |     high: 'bg-priority-high',
 18 |     medium: 'bg-priority-medium',
 19 |     low: 'bg-priority-low'
 20 |   };
 21 |   return colors[priority];
 22 | };
 23 | 
 24 | const TaskList: React.FC<TaskListProps> = ({
 25 |   tasks,
 26 |   onTaskSelect,
 27 |   onTaskStatusChange,
 28 |   onNewTask,
 29 |   onTaskDelete,
 30 | }) => {
 31 |   const [sortBy, setSortBy] = React.useState('priority');
 32 |   const [filterStatus, setFilterStatus] = React.useState('all');
 33 |   const [searchQuery, setSearchQuery] = React.useState('');
 34 |   const [viewMode, setViewMode] = React.useState<'list' | 'grid'>('list');
 35 |   const [menuOpen, setMenuOpen] = React.useState(false);
 36 |   const [selectedTaskId, setSelectedTaskId] = React.useState<string | null>(null);
 37 |   const [menuAnchorEl, setMenuAnchorEl] = React.useState<HTMLElement | null>(null);
 38 | 
 39 |   // Filter and sort tasks
 40 |   const filteredTasks = tasks.filter(task => {
 41 |     if (filterStatus === 'all') return true;
 42 |     return task.status === filterStatus;
 43 |   }).filter(task => {
 44 |     if (!searchQuery) return true;
 45 |     return task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
 46 |            task.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
 47 |   });
 48 | 
 49 |   // Sort tasks
 50 |   const sortedTasks = [...filteredTasks].sort((a, b) => {
 51 |     switch (sortBy) {
 52 |       case 'priority':
 53 |         const priorityOrder = { high: 0, medium: 1, low: 2 };
 54 |         return priorityOrder[a.priority] - priorityOrder[b.priority];
 55 |       case 'dueDate':
 56 |         if (!a.dueDate) return 1;
 57 |         if (!b.dueDate) return -1;
 58 |         return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
 59 |       case 'title':
 60 |         return a.title.localeCompare(b.title);
 61 |       default:
 62 |         return 0;
 63 |     }
 64 |   });
 65 | 
 66 |   const handleMenuOpen = (event: React.MouseEvent, taskId: string) => {
 67 |     event.stopPropagation();
 68 |     setSelectedTaskId(taskId);
 69 |     setMenuAnchorEl(event.currentTarget as HTMLElement);
 70 |     setMenuOpen(true);
 71 |   };
 72 | 
 73 |   const handleMenuClose = () => {
 74 |     setMenuOpen(false);
 75 |     setSelectedTaskId(null);
 76 |     setMenuAnchorEl(null);
 77 |   };
 78 | 
 79 |   return (
 80 |     <div className="h-full flex flex-col min-h-0">
 81 |       {/* Header with search, sorting and view options */}
 82 |       <div className="sticky top-0 bg-bg-primary px-6 py-4 border-b border-border-default z-10">
 83 |         <div className="flex items-center justify-between mb-6">
 84 |           <h2 className="text-xl font-semibold">{`${filteredTasks.length} ${
 85 |             filteredTasks.length === 1 ? 'Task' : 'Tasks'
 86 |           }`}</h2>
 87 |           <div className="flex items-center gap-2">
 88 |             <button
 89 |               onClick={onNewTask}
 90 |               className="px-3 py-2 rounded-md bg-accent-primary text-white hover:bg-opacity-90 
 91 |                        transition-colors duration-200 flex items-center gap-2"
 92 |               aria-label="New task"
 93 |             >
 94 |               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 95 |                 <path
 96 |                   strokeLinecap="round"
 97 |                   strokeLinejoin="round"
 98 |                   strokeWidth={2}
 99 |                   d="M12 4v16m8-8H4"
100 |                 />
101 |               </svg>
102 |               New Task
103 |             </button>
104 |             <button 
105 |               className={`p-2 rounded-md ${viewMode === 'grid' ? 'bg-hover' : 'hover:bg-hover'}`}
106 |               onClick={() => setViewMode('grid')}
107 |               aria-label="Grid view"
108 |             >
109 |               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
110 |                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
111 |               </svg>
112 |             </button>
113 |             <button 
114 |               className={`p-2 rounded-md ${viewMode === 'list' ? 'bg-hover' : 'hover:bg-hover'}`}
115 |               onClick={() => setViewMode('list')}
116 |               aria-label="List view"
117 |             >
118 |               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
119 |                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
120 |               </svg>
121 |             </button>
122 |           </div>
123 |         </div>
124 | 
125 |         {/* Search and Filters */}
126 |         <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
127 |           <div className="relative flex-1">
128 |             <input
129 |               type="text"
130 |               placeholder="Search tasks..."
131 |               value={searchQuery}
132 |               onChange={(e) => setSearchQuery(e.target.value)}
133 |               className="w-full bg-bg-tertiary text-text-primary border border-border-default rounded-md 
134 |                        pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:border-accent-primary"
135 |             />
136 |             <svg
137 |               className="absolute left-3 top-2.5 w-4 h-4 text-text-secondary"
138 |               fill="none"
139 |               stroke="currentColor"
140 |               viewBox="0 0 24 24"
141 |             >
142 |               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
143 |             </svg>
144 |           </div>
145 |           <div className="flex gap-3">
146 |             <select
147 |               value={sortBy}
148 |               onChange={(e) => setSortBy(e.target.value)}
149 |               className="bg-bg-tertiary text-text-primary border border-border-default rounded-md 
150 |                        px-3 py-2.5 text-sm focus:outline-none focus:border-accent-primary min-w-[140px]"
151 |             >
152 |               <option value="priority">Sort by Priority</option>
153 |               <option value="dueDate">Sort by Due Date</option>
154 |               <option value="title">Sort by Title</option>
155 |             </select>
156 |             <select
157 |               value={filterStatus}
158 |               onChange={(e) => setFilterStatus(e.target.value)}
159 |               className="bg-bg-tertiary text-text-primary border border-border-default rounded-md 
160 |                        px-3 py-2.5 text-sm focus:outline-none focus:border-accent-primary min-w-[120px]"
161 |             >
162 |               <option value="all">All Tasks</option>
163 |               <option value="todo">To Do</option>
164 |               <option value="in_progress">In Progress</option>
165 |               <option value="completed">Completed</option>
166 |             </select>
167 |           </div>
168 |         </div>
169 |       </div>
170 | 
171 |       {/* Task List */}
172 |       <div className="flex-1 overflow-y-auto p-6 min-h-0">
173 |         {sortedTasks.length === 0 ? (
174 |           <div className="flex flex-col items-center justify-center py-12 text-text-secondary">
175 |             <svg className="w-16 h-16 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
176 |               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
177 |                     d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
178 |             </svg>
179 |             <p className="text-lg mb-2">No tasks found</p>
180 |             <p className="text-sm">Try adjusting your search or filters</p>
181 |           </div>
182 |         ) : (
183 |           <div className={viewMode === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4' : 'space-y-2'}>
184 |             {sortedTasks.map((task) => (
185 |               <div
186 |                 key={task.id}
187 |                 className={`group flex items-start gap-4 p-4 rounded-lg bg-bg-secondary 
188 |                          hover:bg-bg-tertiary transition-colors duration-200 cursor-pointer 
189 |                           border border-transparent hover:border-border-default
190 |                          ${task.status === 'completed' ? 'opacity-60' : ''}`}
191 |                 onClick={() => onTaskSelect(task.id)}
192 |               >
193 |                 {/* Checkbox */}
194 |                 <button
195 |                   className={`w-5 h-5 rounded-full border-2 border-border-default flex items-center justify-center
196 |                           hover:border-accent-primary transition-colors duration-200
197 |                           ${task.status === 'completed' ? 'bg-priority-completed' : ''}`}
198 |                   onClick={(e) => {
199 |                     e.stopPropagation();
200 |                     onTaskStatusChange(
201 |                       task.id,
202 |                       task.status === 'completed' ? 'todo' : 'completed'
203 |                     );
204 |                   }}
205 |                 >
206 |                   {task.status === 'completed' && (
207 |                     <svg className="w-3 h-3 text-text-primary" viewBox="0 0 12 12">
208 |                       <path
209 |                         d="M3.5 6L5 7.5L8.5 4"
210 |                         stroke="currentColor"
211 |                         strokeWidth="2"
212 |                         strokeLinecap="round"
213 |                         strokeLinejoin="round"
214 |                       />
215 |                     </svg>
216 |                   )}
217 |                 </button>
218 | 
219 |                 {/* Priority Indicator */}
220 |                 <div className={`w-2 h-2 rounded-full ${getPriorityColor(task.priority)}`} />
221 | 
222 |                 {/* Task Content */}
223 |                 <div className="flex-1 min-w-0">
224 |                   <h3 className={`text-base font-medium truncate ${
225 |                     task.status === 'completed' ? 'line-through' : ''
226 |                   }`}>
227 |                     {task.title}
228 |                   </h3>
229 |                   
230 |                   {/* Tags */}
231 |                   {task.tags && task.tags.length > 0 && (
232 |                     <div className="flex flex-wrap gap-2 mt-2">
233 |                       {task.tags.slice(0, 3).map((tag) => (
234 |                         <span
235 |                           key={tag}
236 |                           className="px-2 py-0.5 rounded-full bg-bg-tertiary text-xs truncate"
237 |                         >
238 |                           {tag}
239 |                         </span>
240 |                       ))}
241 |                       {task.tags.length > 3 && (
242 |                         <span className="text-xs text-text-secondary">+{task.tags.length - 3}</span>
243 |                       )}
244 |                     </div>
245 |                   )}
246 | 
247 |                   {/* Due Date */}
248 |                   {task.dueDate && (
249 |                     <span className="text-sm text-text-secondary block mt-2">
250 |                       Due {new Date(task.dueDate).toLocaleDateString()}
251 |                     </span>
252 |                   )}
253 |                 </div>
254 | 
255 |                 {/* Actions */}
256 |                 <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 shrink-0">
257 |                   <button
258 |                     onClick={(e) => handleMenuOpen(e, task.id)}
259 |                     className="p-2 hover:bg-hover rounded-md text-text-secondary 
260 |                              hover:text-text-primary transition-colors duration-200"
261 |                     aria-label="Task options"
262 |                   >
263 |                     <svg
264 |                       className="w-4 h-4"
265 |                       fill="none"
266 |                       stroke="currentColor"
267 |                       viewBox="0 0 24 24"
268 |                     >
269 |                       <path
270 |                         strokeLinecap="round"
271 |                         strokeLinejoin="round"
272 |                         strokeWidth={2}
273 |                         d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
274 |                       />
275 |                     </svg>
276 |                   </button>
277 |                 </div>
278 |               </div>
279 |             ))}
280 |           </div>
281 |         )}
282 |         
283 |         {/* Context Menu */}
284 |         <TaskContextMenu
285 |           isOpen={menuOpen}
286 |           onClose={handleMenuClose}
287 |           onDelete={() => {
288 |             if (selectedTaskId && onTaskDelete) {
289 |               onTaskDelete(selectedTaskId);
290 |             }
291 |           }}
292 |           anchorEl={menuAnchorEl}
293 |         />
294 |       </div>
295 | 
296 |       {/* Task Count Summary */}
297 |       <div className="px-6 py-3 border-t border-border-default bg-bg-secondary">
298 |         <div className="flex justify-between text-sm font-medium text-text-secondary">
299 |           <span>{sortedTasks.length} tasks</span>
300 |           <span>{tasks.filter(t => t.status === 'completed').length} completed</span>
301 |         </div>
302 |       </div>
303 |     </div>
304 |   );
305 | };
306 | 
307 | export default TaskList;


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/birdup000/ADHD-TaskManagementPanel/e49f48a2bbd8e222c19f1ca37c9c9bb1aa1eeb04/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | :root {
  6 |   color-scheme: dark;
  7 | }
  8 | 
  9 | @layer base {
 10 |   body {
 11 |     @apply bg-bg-primary text-text-primary antialiased;
 12 |   }
 13 | 
 14 |   /* Custom scrollbar for the dark theme */
 15 |   ::-webkit-scrollbar {
 16 |     width: 6px;
 17 |     height: 6px;
 18 |   }
 19 | 
 20 |   ::-webkit-scrollbar-track {
 21 |     @apply bg-bg-secondary;
 22 |   }
 23 | 
 24 |   ::-webkit-scrollbar-thumb {
 25 |     @apply bg-border-default rounded-full hover:bg-accent-primary transition-colors;
 26 |   }
 27 | 
 28 |   /* Improved focus styles */
 29 |   :focus-visible {
 30 |     @apply outline-none ring-2 ring-accent-primary ring-offset-1 ring-offset-bg-primary;
 31 |   }
 32 | 
 33 |   /* Custom range input styling */
 34 |   input[type="range"] {
 35 |     @apply h-1.5 rounded-full bg-bg-tertiary;
 36 |     -webkit-appearance: none;
 37 |   }
 38 | 
 39 |   input[type="range"]::-webkit-slider-thumb {
 40 |     @apply w-4 h-4 rounded-full bg-accent-primary cursor-pointer;
 41 |     -webkit-appearance: none;
 42 |   }
 43 | 
 44 |   input[type="range"]::-moz-range-thumb {
 45 |     @apply w-4 h-4 rounded-full bg-accent-primary cursor-pointer border-none;
 46 |   }
 47 | 
 48 |   /* Custom date input styling */
 49 |   input[type="date"] {
 50 |     @apply bg-bg-tertiary border border-border-default rounded-md px-4 py-2.5
 51 |            text-text-primary focus:outline-none focus:border-accent-primary
 52 |            cursor-pointer transition-colors duration-200;
 53 |   }
 54 | 
 55 |   /* Form controls */
 56 |   input[type="text"],
 57 |   input[type="search"],
 58 |   textarea {
 59 |     @apply transition-colors duration-200;
 60 |   }
 61 | 
 62 |   input[type="date"]::-webkit-calendar-picker-indicator {
 63 |     @apply filter invert opacity-70 hover:opacity-100 cursor-pointer;
 64 |   }
 65 | }
 66 | 
 67 | @layer components {
 68 |   /* Task status animations */
 69 |   .task-complete-animation {
 70 |     animation: taskComplete 0.3s ease-in-out;
 71 |   }
 72 | 
 73 |   @keyframes taskComplete {
 74 |     0% {
 75 |       transform: scale(1);
 76 |     }
 77 |     50% {
 78 |       transform: scale(1.1);
 79 |     }
 80 |     100% {
 81 |       transform: scale(1);
 82 |     }
 83 |   }
 84 | 
 85 |   /* Hover transitions */
 86 |   .hover-transition {
 87 |     @apply transition-all duration-200 ease-in-out;
 88 |   }
 89 | 
 90 |   /* Button states */
 91 |   .btn-primary {
 92 |     @apply bg-accent-primary text-white rounded-md px-6 py-2.5 text-sm font-medium
 93 |            hover:bg-opacity-90 transition-colors duration-200
 94 |            disabled:opacity-50 disabled:cursor-not-allowed;
 95 |   }
 96 | 
 97 |   .btn-secondary {
 98 |     @apply border border-border-default text-text-secondary rounded-md px-6 py-2.5 text-sm font-medium
 99 |            hover:bg-hover hover:text-text-primary transition-colors duration-200
100 |            disabled:opacity-50 disabled:cursor-not-allowed;
101 |   }
102 | 
103 |   /* Custom checkbox */
104 |   .custom-checkbox {
105 |     @apply w-5 h-5 rounded-full border-2 border-border-default
106 |            flex items-center justify-center
107 |            hover:border-accent-primary transition-colors duration-200;
108 |   }
109 | 
110 |   /* Tag styles */
111 |   .task-tag {
112 |     @apply px-3 py-1.5 rounded-full bg-bg-tertiary text-xs font-medium
113 |            hover:bg-accent-primary hover:bg-opacity-10 transition-colors duration-200 border border-border-default;
114 |   }
115 | }
116 | 
117 | @layer utilities {
118 |   /* Glass effect for modals and overlays */
119 |   .glass-effect {
120 |     @apply backdrop-blur-sm bg-bg-primary bg-opacity-80;
121 |   }
122 | 
123 |   /* Text gradient */
124 |   .text-gradient {
125 |     @apply bg-clip-text text-transparent bg-gradient-to-r from-accent-primary to-accent-secondary;
126 |   }
127 | }
128 | 
129 | /* Layout transitions */
130 | .panel-transition {
131 |   @apply transition-transform duration-300 ease-in-out;
132 | }
133 | 


--------------------------------------------------------------------------------
/app/hooks/useAsyncStorage.ts:
--------------------------------------------------------------------------------
 1 | export const useAsyncStorage = () => {
 2 |   const getItem = async (key: string): Promise<string | null> => {
 3 |     if (typeof window !== 'undefined') {
 4 |       return localStorage.getItem(key);
 5 |     }
 6 |     return null;
 7 |   };
 8 | 
 9 |   const setItem = async (key: string, value: string): Promise<void> => {
10 |     if (typeof window !== 'undefined') {
11 |       localStorage.setItem(key, value);
12 |     }
13 |   };
14 | 
15 |   const removeItem = async (key: string): Promise<void> => {
16 |     if (typeof window !== 'undefined') {
17 |       localStorage.removeItem(key);
18 |     }
19 |   };
20 | 
21 |   return { getItem, setItem, removeItem };
22 | };


--------------------------------------------------------------------------------
/app/hooks/useCategories.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import { useAsyncStorage } from './useAsyncStorage';
 3 | import { Category } from '../types/category';
 4 | 
 5 | const STORAGE_KEY = 'categories';
 6 | 
 7 | export const useCategories = () => {
 8 |   const [categories, setCategories] = useState<Category[]>([]);
 9 |   const [loading, setLoading] = useState(true);
10 |   const { getItem, setItem } = useAsyncStorage();
11 | 
12 |   // Load categories from storage
13 |   useEffect(() => {
14 |     const loadCategories = async () => {
15 |       try {
16 |         const storedCategories = await getItem(STORAGE_KEY);
17 |         if (storedCategories) {
18 |           setCategories(JSON.parse(storedCategories));
19 |         }
20 |       } catch (error) {
21 |         console.error('Error loading categories:', error);
22 |       } finally {
23 |         setLoading(false);
24 |       }
25 |     };
26 | 
27 |     loadCategories();
28 |   }, []);
29 | 
30 |   // Save categories to storage
31 |   const saveCategories = async (updatedCategories: Category[]) => {
32 |     try {
33 |       await setItem(STORAGE_KEY, JSON.stringify(updatedCategories));
34 |       setCategories(updatedCategories);
35 |     } catch (error) {
36 |       console.error('Error saving categories:', error);
37 |       throw error;
38 |     }
39 |   };
40 | 
41 |   // Add a new category
42 |   const addCategory = async (category: Omit<Category, 'id' | 'createdAt' | 'updatedAt'>) => {
43 |     const now = new Date().toISOString();
44 |     const newCategory: Category = {
45 |       ...category,
46 |       id: `category-${Date.now()}`,
47 |       createdAt: now,
48 |       updatedAt: now,
49 |     };
50 |     const updatedCategories = [...categories, newCategory];
51 |     await saveCategories(updatedCategories);
52 |     return newCategory;
53 |   };
54 | 
55 |   // Update an existing category
56 |   const updateCategory = async (categoryId: string, updates: Partial<Omit<Category, 'id' | 'createdAt'>>) => {
57 |     const updatedCategories = categories.map(category => {
58 |       if (category.id === categoryId) {
59 |         return {
60 |           ...category,
61 |           ...updates,
62 |           updatedAt: new Date().toISOString(),
63 |         };
64 |       }
65 |       return category;
66 |     });
67 |     await saveCategories(updatedCategories);
68 |   };
69 | 
70 |   // Delete a category
71 |   const deleteCategory = async (categoryId: string) => {
72 |     const updatedCategories = categories.filter(category => category.id !== categoryId);
73 |     await saveCategories(updatedCategories);
74 |   };
75 | 
76 |   return {
77 |     categories,
78 |     loading,
79 |     addCategory,
80 |     updateCategory,
81 |     deleteCategory,
82 |   };
83 | };


--------------------------------------------------------------------------------
/app/hooks/useNavigation.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import { useRouter, useSearchParams } from 'next/navigation';
 3 | 
 4 | export const useNavigation = () => {
 5 |   const router = useRouter();
 6 |   const searchParams = useSearchParams();
 7 |   
 8 |   // Initialize view from URL or default to 'list'
 9 |   const defaultView = searchParams.get('view') as 'list' | 'board' | 'calendar' | 'mindmap' | null;
10 |   const [currentView, setCurrentView] = useState<'list' | 'board' | 'calendar' | 'mindmap'>(
11 |     defaultView && ['list', 'board', 'calendar', 'mindmap'].includes(defaultView) ? defaultView : 'list'
12 |   );
13 | 
14 |   const handleSmartListClick = (id: string) => {
15 |     const params = new URLSearchParams(searchParams.toString());
16 |     // If clicking the active filter, clear it
17 |     if (searchParams.get('smartList') === id) {
18 |       params.delete('smartList');
19 |     } else {
20 |       params.set('smartList', id);
21 |       params.delete('category');
22 |       params.delete('tag');
23 |     }
24 |     router.push(`/?${params.toString()}`);
25 |   };
26 | 
27 |   const handleCategoryClick = (id: string) => {
28 |     const params = new URLSearchParams(searchParams.toString());
29 |     // If clicking the active filter, clear it
30 |     if (searchParams.get('category') === id) {
31 |       params.delete('category');
32 |     } else {
33 |       params.set('category', id);
34 |       params.delete('smartList');
35 |       params.delete('tag');
36 |     }
37 |     router.push(`/?${params.toString()}`);
38 |   };
39 | 
40 |   const handleTagClick = (id: string) => {
41 |     const params = new URLSearchParams(searchParams.toString());
42 |     // If clicking the active filter, clear it
43 |     if (searchParams.get('tag') === id) {
44 |       params.delete('tag');
45 |     } else {
46 |       params.set('tag', id);
47 |       params.delete('category');
48 |       params.delete('smartList');
49 |     }
50 |     router.push(`/?${params.toString()}`);
51 |   };
52 | 
53 |   const handleViewChange = (view: 'list' | 'board' | 'calendar' | 'mindmap') => {
54 |     setCurrentView(view);
55 |     const params = new URLSearchParams(searchParams.toString());
56 |     // Preserve existing filters when changing view
57 |     params.set('view', view);
58 |     // Make sure we keep existing filters
59 |     const smartList = searchParams.get('smartList');
60 |     const category = searchParams.get('category');
61 |     const tag = searchParams.get('tag');
62 |     if (smartList) params.set('smartList', smartList);
63 |     if (category) params.set('category', category);
64 |     if (tag) params.set('tag', tag);
65 |     router.push(`/?${params.toString()}`);
66 |   };
67 | 
68 |   return {
69 |     currentView,
70 |     handleSmartListClick,
71 |     handleCategoryClick,
72 |     handleTagClick,
73 |     handleViewChange,
74 |   };
75 | };


--------------------------------------------------------------------------------
/app/hooks/useTasks.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import { Task } from '../types/task';
 3 | import { useAsyncStorage } from './useAsyncStorage';
 4 | 
 5 | export const useTasks = () => {
 6 |   const [tasks, setTasks] = useState<Task[]>([]);
 7 |   const [loading, setLoading] = useState(true);
 8 |   const { getItem, setItem } = useAsyncStorage();
 9 |   const STORAGE_KEY = 'tasks';
10 | 
11 |   useEffect(() => {
12 |     const loadTasks = async () => {
13 |       try {
14 |         const storedTasks = await getItem(STORAGE_KEY);
15 |         if (storedTasks) {
16 |           setTasks(JSON.parse(storedTasks));
17 |         }
18 |       } catch (error) {
19 |         console.error('Error loading tasks:', error);
20 |       } finally {
21 |         setLoading(false);
22 |       }
23 |     };
24 | 
25 |     loadTasks();
26 |   }, []);
27 | 
28 |   const saveTasks = async (updatedTasks: Task[]) => {
29 |     try {
30 |       await setItem(STORAGE_KEY, JSON.stringify(updatedTasks));
31 |       setTasks(updatedTasks);
32 |     } catch (error) {
33 |       console.error('Error saving tasks:', error);
34 |     }
35 |   };
36 | 
37 |   const addTask = async (task: Task) => {
38 |     const updatedTasks = [...tasks, task];
39 |     await saveTasks(updatedTasks);
40 |   };
41 | 
42 |   const updateTask = async (updatedTask: Task) => {
43 |     const updatedTasks = tasks.map(task => 
44 |       task.id === updatedTask.id ? updatedTask : task
45 |     );
46 |     await saveTasks(updatedTasks);
47 |   };
48 | 
49 |   const deleteTask = async (taskId: string) => {
50 |     const updatedTasks = tasks.filter(task => task.id !== taskId);
51 |     await saveTasks(updatedTasks);
52 |   };
53 | 
54 |   const updateTaskStatus = async (taskId: string, status: Task['status']) => {
55 |     const updatedTasks = tasks.map(task =>
56 |       task.id === taskId ? { ...task, status } : task
57 |     );
58 |     await saveTasks(updatedTasks);
59 |   };
60 | 
61 |   return {
62 |     tasks,
63 |     loading,
64 |     addTask,
65 |     updateTask,
66 |     deleteTask,
67 |     updateTaskStatus
68 |   };
69 | };


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter } from "next/font/google";
 3 | import "./globals.css";
 4 | 
 5 | const inter = Inter({ subsets: ["latin"] });
 6 | 
 7 | export const metadata: Metadata = {
 8 |   title: "ADHD Task Management Panel",
 9 |   description: "A dark-themed task management panel optimized for ADHD users",
10 | };
11 | 
12 | export default function RootLayout({
13 |   children,
14 | }: {
15 |   children: React.ReactNode;
16 | }) {
17 |   return (
18 |     <html lang="en" className="dark">
19 |       <body className={`${inter.className} min-h-screen antialiased`}>
20 |         {children}
21 |       </body>
22 |     </html>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React from 'react';
  4 | import TaskPanelLayout from './components/layout/TaskPanelLayout';
  5 | import NavigationPanel from './components/layout/NavigationPanel';
  6 | import TaskList from './components/tasks/TaskList';
  7 | import BoardView from './components/tasks/BoardView';
  8 | import CalendarView from './components/tasks/CalendarView';
  9 | import MindMapView from './components/tasks/MindMapView';
 10 | import TaskDetailPanel from './components/tasks/TaskDetailPanel';
 11 | import { Task } from './types/task';
 12 | import { useNavigation } from './hooks/useNavigation';
 13 | import { useAsyncStorage } from './hooks/useAsyncStorage';
 14 | import { useSearchParams } from 'next/navigation';
 15 | import { useCategories } from './hooks/useCategories';
 16 | import CategoryModal from './components/categories/CategoryModal';
 17 | 
 18 | interface NavItem {
 19 |   id: string;
 20 |   label: string;
 21 |   count?: number;
 22 | }
 23 | 
 24 | // Initial empty navigation structure
 25 | const emptyNavItems: { smartLists: NavItem[]; categories: NavItem[]; tags: NavItem[] } = {
 26 |   smartLists: [
 27 |     { id: 'all', label: 'All Tasks', count: 0 },
 28 |     { id: 'today', label: 'Today', count: 0 },
 29 |     { id: 'upcoming', label: 'Upcoming', count: 0 },
 30 |     { id: 'priority', label: 'Priority', count: 0 },
 31 |   ],
 32 |   categories: [],
 33 |   tags: [],
 34 | };
 35 | 
 36 | const TASKS_STORAGE_KEY = 'adhd-panel-tasks';
 37 | 
 38 | // Function to extract unique tags from tasks
 39 | const extractTagsFromTasks = (tasks: Task[]): string[] => {
 40 |   return Array.from(new Set(tasks.flatMap(t => t.tags || [])));
 41 | };
 42 | 
 43 | export default function Home() {
 44 |   const searchParams = useSearchParams();
 45 |   const [selectedTaskId, setSelectedTaskId] = React.useState<string | null>(null);
 46 |   const [isNewCategoryModalOpen, setIsNewCategoryModalOpen] = React.useState(false);
 47 |   const { categories, addCategory } = useCategories();
 48 |   const [tasks, setTasks] = React.useState<Task[]>([]);
 49 |   const storage = useAsyncStorage();
 50 |   const {
 51 |     currentView,
 52 |     handleSmartListClick,
 53 |     handleCategoryClick,
 54 |     handleTagClick,
 55 |     handleViewChange,
 56 |   } = useNavigation();
 57 | 
 58 |   // Load tasks from storage on component mount
 59 |   React.useEffect(() => {
 60 |     const loadTasks = async () => {
 61 |       const storedTasks = await storage.getItem(TASKS_STORAGE_KEY);
 62 |       if (storedTasks) {
 63 |         try {
 64 |           setTasks(JSON.parse(storedTasks));
 65 |         } catch (error) {
 66 |           console.error('Error parsing stored tasks:', error);
 67 |           // Initialize with empty array if parsing fails
 68 |           setTasks([]);
 69 |           await storage.setItem(TASKS_STORAGE_KEY, JSON.stringify([]));
 70 |         }
 71 |       } else {
 72 |         await storage.setItem(TASKS_STORAGE_KEY, JSON.stringify([]));
 73 |       }
 74 |     };
 75 | 
 76 |     loadTasks();
 77 |   }, []);
 78 | 
 79 |   // Save tasks to storage whenever they change
 80 |   React.useEffect(() => {
 81 |     storage.setItem(TASKS_STORAGE_KEY, JSON.stringify(tasks));
 82 |   }, [tasks]);
 83 | 
 84 |   // Update navigation item counts based on tasks
 85 |   const navItemsWithCounts = React.useMemo(() => {
 86 |     const today = new Date();
 87 |     const inOneWeek = new Date();
 88 |     inOneWeek.setDate(today.getDate() + 7);
 89 |     const tags = extractTagsFromTasks(tasks);
 90 |     
 91 |     return {
 92 |       ...emptyNavItems,
 93 |       categories: categories.map((category): NavItem => ({
 94 |         id: category.id,
 95 |         label: category.name,
 96 |         count: tasks.filter(task => task.category === category.id).length
 97 |       })),
 98 |       tags: tags.map((tag): NavItem => ({
 99 |         id: tag,
100 |         label: tag,
101 |         count: tasks.filter(task => task.tags?.includes(tag)).length
102 |       })),
103 |       smartLists: emptyNavItems.smartLists.map((item): NavItem => ({
104 |         ...item,
105 |         count: tasks.filter(task => {
106 |           switch (item.id) {
107 |             case 'all':
108 |               return true;
109 |             case 'today':
110 |               return task.dueDate ? new Date(task.dueDate).toDateString() === today.toDateString() : false;
111 |             case 'upcoming':
112 |               const dueDate = task.dueDate ? new Date(task.dueDate) : null;
113 |               return dueDate ? dueDate > today && dueDate <= inOneWeek : false;
114 |             case 'priority':
115 |               return task.priority === 'high';
116 |             default:
117 |               return false;
118 |           }
119 |         }).length
120 |       }))
121 |     };
122 |   }, [tasks, categories]);
123 | 
124 |   const filteredTasks = React.useMemo(() => {
125 |     const smartList = searchParams.get('smartList');
126 |     const category = searchParams.get('category');
127 |     const tag = searchParams.get('tag');
128 | 
129 |     return tasks.filter(task => {
130 |       if (smartList) {
131 |         switch (smartList) {
132 |           case 'today':
133 |             return task.dueDate ? new Date(task.dueDate).toDateString() === new Date().toDateString() : false;
134 |           case 'upcoming':
135 |             const dueDate = task.dueDate ? new Date(task.dueDate) : null;
136 |             const today = new Date();
137 |             const inOneWeek = new Date(today);
138 |             inOneWeek.setDate(today.getDate() + 7);
139 |             return dueDate ? dueDate > today && dueDate <= inOneWeek : false;
140 |           case 'priority':
141 |             return task.priority === 'high';
142 |           case 'all':
143 |             return true;
144 |           default:
145 |             return false;
146 |         }
147 |       }
148 |       if (category && (!task.category || task.category !== category)) return false;
149 |       if (tag && !task.tags?.includes(tag)) return false;
150 |       return true;
151 |     });
152 |   }, [searchParams, tasks]);
153 | 
154 |   const selectedTask = React.useMemo(() => {
155 |     if (!selectedTaskId) return null;
156 |     return tasks.find(task => task.id === selectedTaskId) || null;
157 |   }, [selectedTaskId, tasks]);
158 | 
159 |   const handleTaskSelect = (taskId: string) => {
160 |     setSelectedTaskId(taskId);
161 |   };
162 | 
163 |   const handleTaskStatusChange = (taskId: string, status: Task['status']) => {
164 |     setTasks(prevTasks => 
165 |       prevTasks.map(task => 
166 |         task.id === taskId ? { ...task, status } : task
167 |       )
168 |     );
169 |   };
170 | 
171 |   const handleTaskSave = (updatedTask: Task) => {
172 |     setTasks(prevTasks => {
173 |       const taskIndex = prevTasks.findIndex(t => t.id === updatedTask.id);
174 |       if (taskIndex === -1) {
175 |         // Add new task
176 |         return [...prevTasks, { ...updatedTask, id: Date.now().toString() }];
177 |       }
178 |       // Update existing task
179 |       return prevTasks.map(t => t.id === updatedTask.id ? updatedTask : t);
180 |     });
181 |   };
182 | 
183 |   const handleTaskDelete = async (taskId: string) => {
184 |     const updatedTasks = tasks.filter(task => task.id !== taskId);
185 |     setTasks(updatedTasks);
186 |     await storage.setItem(TASKS_STORAGE_KEY, JSON.stringify(updatedTasks));
187 |     setSelectedTaskId(null);
188 |   };
189 | 
190 | 
191 |   const handleNewTask = () => {
192 |     const emptyTask: Task = {
193 |       id: `new-${Date.now()}`,
194 |       title: '',
195 |       priority: 'medium',
196 |       status: 'todo',
197 |       category: searchParams.get('category') || undefined,
198 |       tags: searchParams.get('tag') ? [searchParams.get('tag')!] : []
199 |     };
200 |     setTasks(prevTasks => [...prevTasks, emptyTask]);
201 |     setSelectedTaskId(emptyTask.id);
202 |   };
203 | 
204 |   const handleMindMapTaskCreate = (partialTask: Partial<Task>) => {
205 |     const newTask: Task = {
206 |       id: `task-${Date.now()}`,
207 |       title: partialTask.title || '',
208 |       description: partialTask.description || '',
209 |       status: partialTask.status || 'todo',
210 |       priority: partialTask.priority || 'medium',
211 |       category: partialTask.category,
212 |       tags: partialTask.tags || []
213 |     };
214 |     handleTaskSave(newTask);
215 |   };
216 | 
217 |   return (
218 |     <main className="h-screen">
219 |       <TaskPanelLayout
220 |         isRightPanelVisible={Boolean(selectedTaskId)}
221 |         leftPanel={
222 |           <NavigationPanel
223 |             categories={navItemsWithCounts.categories}
224 |             renderCategoryHeader={() => (
225 |               <div className="flex items-center justify-between px-4 mb-2">
226 |                 <h2 className="text-sm font-medium text-text-secondary">CATEGORIES</h2>
227 |                 <button
228 |                   onClick={() => setIsNewCategoryModalOpen(true)}
229 |                   className="p-1 hover:bg-hover rounded-md text-text-secondary 
230 |                            hover:text-text-primary transition-colors duration-200"
231 |                   aria-label="Add new category"
232 |                 >
233 |                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
234 |                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
235 |                   </svg>
236 |                 </button>
237 |               </div>
238 |             )}
239 |             smartLists={navItemsWithCounts.smartLists}
240 |             tags={navItemsWithCounts.tags}
241 |             activeSmartList={searchParams.get('smartList') || undefined}
242 |             activeCategory={searchParams.get('category') || undefined}
243 |             activeTag={searchParams.get('tag') || undefined}
244 |             activeView={currentView}
245 |             onSmartListClick={handleSmartListClick}
246 |             onCategoryClick={handleCategoryClick}
247 |             onTagClick={handleTagClick}
248 |             onViewChange={handleViewChange}
249 |           />
250 |         }
251 |         mainPanel={
252 |           <div className="h-full flex flex-col">
253 |             {/* View Mode Selector */}
254 |             <div className="p-4 border-b border-border-default">
255 |               {/* Header */}
256 |               <div className="mb-4">
257 |                 {/* Show current filter */}
258 |                 {(searchParams.get('smartList') || searchParams.get('category') || searchParams.get('tag')) && (
259 |                   <div className="flex items-center gap-4 text-sm text-text-secondary mb-2">
260 |                     {searchParams.get('smartList') && (
261 |                       <div className="flex items-center gap-2">
262 |                         <span>Smart List: {navItemsWithCounts.smartLists.find(item => item.id === searchParams.get('smartList'))?.label}</span>
263 |                         <button
264 |                           onClick={() => handleSmartListClick(searchParams.get('smartList')!)}
265 |                           className="p-1 hover:bg-hover rounded-md"
266 |                           aria-label="Clear smart list filter"
267 |                         >
268 |                           <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
269 |                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
270 |                           </svg>
271 |                         </button>
272 |                       </div>
273 |                     )}
274 |                     {searchParams.get('category') && (
275 |                       <div className="flex items-center gap-2">
276 |                         <span>Category: {navItemsWithCounts.categories.find(item => item.id === searchParams.get('category'))?.label}</span>
277 |                         <button
278 |                           onClick={() => handleCategoryClick(searchParams.get('category')!)}
279 |                           className="p-1 hover:bg-hover rounded-md"
280 |                           aria-label="Clear category filter"
281 |                         >
282 |                           <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
283 |                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
284 |                           </svg>
285 |                         </button>
286 |                       </div>
287 |                     )}
288 |                     {searchParams.get('tag') && (
289 |                       <div className="flex items-center gap-2">
290 |                         <span>Tag: {navItemsWithCounts.tags.find(item => item.id === searchParams.get('tag'))?.label}</span>
291 |                         <button
292 |                           onClick={() => handleTagClick(searchParams.get('tag')!)}
293 |                           className="p-1 hover:bg-hover rounded-md"
294 |                           aria-label="Clear tag filter"
295 |                         >
296 |                           <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
297 |                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
298 |                           </svg>
299 |                         </button>
300 |                       </div>
301 |                     )}
302 |                   </div>
303 |                 )}
304 |               </div>
305 |               <div className="flex items-center gap-2">
306 |                 <button
307 |                   onClick={() => handleViewChange('list')}
308 |                   className={`px-3 py-1.5 rounded-md ${
309 |                     currentView === 'list' ? 'bg-accent-primary text-white' : 'hover:bg-hover'
310 |                   }`}
311 |                 >
312 |                   List
313 |                 </button>
314 |                 <button
315 |                   onClick={() => handleViewChange('board')}
316 |                   className={`px-3 py-1.5 rounded-md ${
317 |                     currentView === 'board' ? 'bg-accent-primary text-white' : 'hover:bg-hover'
318 |                   }`}
319 |                 >
320 |                   Board
321 |                 </button>
322 |                 <button
323 |                   onClick={() => handleViewChange('calendar')}
324 |                   className={`px-3 py-1.5 rounded-md ${
325 |                     currentView === 'calendar' ? 'bg-accent-primary text-white' : 'hover:bg-hover'
326 |                   }`}
327 |                 >
328 |                   Calendar
329 |                 </button>
330 |                 <button
331 |                   onClick={() => handleViewChange('mindmap')}
332 |                   className={`px-3 py-1.5 rounded-md ${
333 |                     currentView === 'mindmap' 
334 |                       ? 'bg-accent-primary text-white' 
335 |                       : 'hover:bg-hover'
336 |                   }`}
337 |                 >
338 |                   Mind Map
339 |                 </button>
340 |                 
341 |               </div>
342 |             </div>
343 | 
344 |             {/* View Content */}
345 |             <div className="flex-1">
346 |               {currentView === 'list' && (
347 |                 <TaskList
348 |                   tasks={filteredTasks}
349 |                   onTaskSelect={handleTaskSelect}
350 |                   onTaskStatusChange={handleTaskStatusChange}
351 |                   onNewTask={handleNewTask}
352 |                   onTaskDelete={handleTaskDelete}
353 |                 />
354 |               )}
355 |               {currentView === 'board' && (
356 |                 <BoardView
357 |                   tasks={filteredTasks}
358 |                   onTaskSelect={handleTaskSelect}
359 |                   onTaskStatusChange={handleTaskStatusChange}
360 |                 />
361 |               )}
362 |               {currentView === 'calendar' && (
363 |                 <CalendarView
364 |                   tasks={filteredTasks}
365 |                   onTaskSelect={handleTaskSelect}
366 |                 />
367 |               )}
368 |               {currentView === 'mindmap' && (
369 |                 <MindMapView
370 |                   tasks={filteredTasks}
371 |                   onTaskSelect={handleTaskSelect}
372 |                   onTaskCreate={handleMindMapTaskCreate}
373 |                 />
374 |               )}
375 |             </div>
376 |           </div>
377 |         }
378 |         rightPanel={
379 |           <TaskDetailPanel
380 |             task={selectedTask}
381 |             onClose={() => setSelectedTaskId(null)}
382 |             onSave={handleTaskSave}
383 |             onDelete={handleTaskDelete}
384 |           />
385 |         }
386 |       />
387 | 
388 |       {/* Category Modal */}
389 |       <CategoryModal
390 |         isOpen={isNewCategoryModalOpen}
391 |         onClose={() => setIsNewCategoryModalOpen(false)}
392 |         onSave={addCategory}
393 |         initialData={{}}
394 |       />
395 |     </main>
396 |   );
397 | }
398 | 


--------------------------------------------------------------------------------
/app/theme/theme.ts:
--------------------------------------------------------------------------------
 1 | export const theme = {
 2 |   colors: {
 3 |     background: {
 4 |       primary: '#121212',
 5 |       secondary: '#1E1E1E',
 6 |       tertiary: '#2D2D2D'
 7 |     },
 8 |     accent: {
 9 |       primary: '#7B68EE',    // Deep purple
10 |       secondary: '#20B2AA'   // Teal
11 |     },
12 |     text: {
13 |       primary: '#E0E0E0',
14 |       secondary: 'rgba(224, 224, 224, 0.7)'
15 |     },
16 |     priority: {
17 |       high: '#FF5252',
18 |       medium: '#FFB300',
19 |       low: '#4CAF50',
20 |       completed: '#757575'
21 |     },
22 |     border: '#2D2D2D',
23 |     hover: 'rgba(123, 104, 238, 0.1)'  // Deep purple with opacity
24 |   },
25 |   typography: {
26 |     fontFamily: {
27 |       sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif']
28 |     },
29 |     fontSize: {
30 |       xs: '12px',
31 |       sm: '14px',
32 |       base: '16px',
33 |       lg: '18px',
34 |       xl: '20px'
35 |     },
36 |     fontWeight: {
37 |       light: 300,
38 |       normal: 400,
39 |       medium: 500,
40 |       semibold: 600
41 |     },
42 |     lineHeight: {
43 |       normal: 1.5,
44 |       relaxed: 1.75
45 |     }
46 |   },
47 |   spacing: {
48 |     panel: {
49 |       left: '20%',
50 |       main: '50%',
51 |       right: '30%'
52 |     }
53 |   },
54 |   breakpoints: {
55 |     sm: '640px',
56 |     md: '768px',
57 |     lg: '1024px',
58 |     xl: '1280px'
59 |   }
60 | }


--------------------------------------------------------------------------------
/app/types/category.ts:
--------------------------------------------------------------------------------
1 | export interface Category {
2 |   id: string;
3 |   name: string;
4 |   description?: string;
5 |   color?: string;
6 |   createdAt: string;
7 |   updatedAt: string;
8 | }


--------------------------------------------------------------------------------
/app/types/mindmap.ts:
--------------------------------------------------------------------------------
 1 | export interface MindMapNode {
 2 |   id: string;
 3 |   parentId: string | null;
 4 |   content: string;
 5 |   children: string[];
 6 |   status: 'idea' | 'task' | 'completed';
 7 |   taskId?: string; // Reference to actual task if this node is a task
 8 |   x?: number; // For layout positioning
 9 |   y?: number;
10 |   isCollapsed?: boolean; // Whether node's children are hidden
11 | }
12 | 
13 | export interface MindMap {
14 |   id: string;
15 |   name: string;
16 |   rootId: string;
17 |   nodes: { [key: string]: MindMapNode };
18 | }
19 | 
20 | export interface MindMapHistory {
21 |   past: MindMap[];
22 |   present: MindMap;
23 |   future: MindMap[];
24 |   maxSteps?: number;
25 | }


--------------------------------------------------------------------------------
/app/types/task.ts:
--------------------------------------------------------------------------------
 1 | export interface Task {
 2 |   id: string;
 3 |   title: string;
 4 |   description?: string;
 5 |   priority: 'high' | 'medium' | 'low';
 6 |   status: 'todo' | 'in_progress' | 'completed';
 7 |   dueDate?: string;
 8 |   startDate?: string;
 9 |   tags?: string[];
10 |   effort?: string;
11 |   progress?: number;
12 |   category?: string;
13 | }


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/instructions.txt:
--------------------------------------------------------------------------------
  1 | # Ultimate Dark Mode Task Panel Specification
  2 | 
  3 | ## Overview
  4 | The ultimate task panel combines elegant design with powerful functionality in a dark-themed interface optimized for productivity. This panel seamlessly integrates with any workflow while maintaining exceptional usability and visual appeal.
  5 | 
  6 | ## Visual Design
  7 | 
  8 | ### Color Palette
  9 | - **Background**: Rich dark background (#121212) with subtle depth variations
 10 | - **Primary accent**: Deep purple (#7B68EE) for interactive elements
 11 | - **Secondary accent**: Teal (#20B2AA) for highlighting and status indicators
 12 | - **Text**: Primarily light (#E0E0E0) with reduced opacity for secondary information
 13 | - **Status colors**:
 14 |   - High priority: #FF5252
 15 |   - Medium priority: #FFB300
 16 |   - Low priority: #4CAF50
 17 |   - Completed: #757575 with strikethrough
 18 | 
 19 | ### Typography
 20 | - Primary font: Inter or SF Pro (system font fallback)
 21 | - Task titles: 16px, medium weight
 22 | - Metadata: 12-14px, light weight
 23 | - Clear hierarchy with 1.5x line spacing for optimal readability
 24 | 
 25 | ### Layout Structure
 26 | - Three-panel responsive layout that collapses intelligently on smaller screens:
 27 |   1. **Left Navigation Panel** (collapsible): Categories, filters, tags (20% width)
 28 |   2. **Main Task List Panel**: Task items with core metadata (50-60% width)
 29 |   3. **Detail Panel** (collapsible): Selected task details and editing (20-30% width)
 30 | 
 31 | ## Core Features
 32 | 
 33 | ### Task Management
 34 | - **Quick Add**: Floating action button + keyboard shortcut (A) for instant task creation
 35 | - **Natural Language Processing**: "Tomorrow at 3pm meeting with Alex" auto-creates structured data
 36 | - **Rich Text Editing**: Format task descriptions with markdown or WYSIWYG controls
 37 | - **Multi-selection**: Shift+click or drag to select multiple tasks for batch operations
 38 | - **Inline Editing**: Double-click to edit any field directly within the list view
 39 | 
 40 | ### Organization System
 41 | - **Nested Projects/Categories**: Unlimited depth with collapsible tree view
 42 | - **Custom Tags**: Color-coded with autocomplete and quick filters
 43 | - **Smart Lists**: Dynamically populated based on conditions (due today, high priority, etc.)
 44 | - **Saved Filters**: User-defined combinations of search criteria
 45 | - **Multiple View Options**:
 46 |   - List view (default)
 47 |   - Kanban board
 48 |   - Calendar view
 49 |   - Timeline/Gantt view
 50 |   - Mind map view for visual thinkers
 51 | 
 52 | ### Task Properties
 53 | - Priority levels (1-4) with visual indicators
 54 | - Due dates with time component
 55 | - Start dates and duration
 56 | - Recurring patterns (daily, weekly, custom)
 57 | - Effort estimation (time/complexity)
 58 | - Progress tracking (percentage or fractions)
 59 | - Dependencies (blocks/blocked by)
 60 | - Attachments and references
 61 | - Custom fields (user-definable)
 62 | 
 63 | ## Interaction Design
 64 | 
 65 | ### Keyboard Navigation
 66 | - Complete keyboard control for mouse-free operation
 67 | - Customizable keyboard shortcuts
 68 | - Vim-inspired commands for power users
 69 | - Tab navigation between fields
 70 | - Arrow keys for list navigation
 71 | 
 72 | ### Drag and Drop
 73 | - Reorder tasks within lists
 74 | - Move tasks between categories/projects
 75 | - Adjust dates on calendar view
 76 | - Reposition cards on kanban board
 77 | - Drag files to attach to tasks
 78 | 
 79 | ### Context Menus
 80 | - Right-click access to common operations
 81 | - Quick actions based on task state
 82 | - Bulk operations for multiple selected items
 83 | - Convert task types (e.g., task to project)
 84 | 
 85 | ## Advanced Features
 86 | 
 87 | ### Focus Mode
 88 | - Minimalist interface showing only current task
 89 | - Pomodoro timer integration
 90 | - Distraction blocking options
 91 | - Ambient sound selection
 92 | 
 93 | ### Analytics Dashboard
 94 | - Productivity trends
 95 | - Completion rates
 96 | - Time tracking analysis
 97 | - Custom reports
 98 | - Export capabilities (CSV, PDF)
 99 | 
100 | ### Automation
101 | - Template tasks and projects
102 | - Smart scheduling assistant
103 | - Recurring task management
104 | - Automatic priority adjustment based on deadlines
105 | - Integration with calendar and email
106 | 
107 | ### Collaboration
108 | - Shared projects and tasks
109 | - Comments and discussions
110 | - Assign tasks to team members
111 | - Activity feed and notifications
112 | - Permission levels and privacy controls
113 | 
114 | ## Accessibility Features
115 | - High contrast mode option
116 | - Keyboard accessibility
117 | - Screen reader compatibility
118 | - Customizable font sizes
119 | - Reduced motion setting
120 | 
121 | ## Technical Integration
122 | - Cloud sync across devices
123 | - Offline functionality
124 | - API for extensions and integrations
125 | - Import/export in standard formats
126 | - Browser extension for web clipping
127 | 
128 | ## Animation & Microinteractions
129 | - Subtle task completion animation
130 | - Smooth transitions between views
131 | - Gentle hover states
132 | - Progress indicators for loading
133 | - Satisfying checkbox animations
134 | 
135 | ## Implementation Notes
136 | The panel should be built using modern web standards, with performance optimization for handling thousands of tasks without lag. Dark mode should be implemented using TailwindCSS


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   /* config options here */
5 | };
6 | 
7 | export default nextConfig;
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "task-management-panel",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "lodash": "^4.17.21",
13 |     "next": "15.1.7",
14 |     "react": "^19.0.0",
15 |     "react-dom": "^19.0.0"
16 |   },
17 |   "devDependencies": {
18 |     "@eslint/eslintrc": "^3",
19 |     "@types/lodash": "^4.17.16",
20 |     "@types/node": "^20",
21 |     "@types/react": "^19",
22 |     "@types/react-dom": "^19",
23 |     "eslint": "^9",
24 |     "eslint-config-next": "15.1.7",
25 |     "postcss": "^8",
26 |     "tailwindcss": "^3.4.1",
27 |     "typescript": "^5"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/public/window.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | export default {
 4 |   content: [
 5 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 8 |   ],
 9 |   darkMode: 'class',
10 |   theme: {
11 |     extend: {
12 |       colors: {
13 |         // Background colors
14 |         'bg-primary': '#121212',
15 |         'bg-secondary': '#1E1E1E',
16 |         'bg-tertiary': '#2D2D2D',
17 |         
18 |         // Accent colors
19 |         'accent-primary': '#7B68EE',
20 |         'accent-secondary': '#20B2AA',
21 |         
22 |         // Text colors
23 |         'text-primary': '#E0E0E0',
24 |         'text-secondary': 'rgba(224, 224, 224, 0.7)',
25 |         
26 |         // Priority colors
27 |         'priority-high': '#FF5252',
28 |         'priority-medium': '#FFB300',
29 |         'priority-low': '#4CAF50',
30 |         'priority-completed': '#757575',
31 |         
32 |         // Border colors
33 |         'border-default': '#2D2D2D',
34 |         'hover': 'rgba(123, 104, 238, 0.1)'
35 |       },
36 |       fontFamily: {
37 |         sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
38 |       },
39 |       fontSize: {
40 |         xs: '12px',
41 |         sm: '14px',
42 |         base: '16px',
43 |         lg: '18px',
44 |         xl: '20px'
45 |       },
46 |       width: {
47 |         'panel-left': '20%',
48 |         'panel-main': '50%',
49 |         'panel-right': '30%'
50 |       },
51 |       lineHeight: {
52 |         relaxed: '1.75'
53 |       },
54 |       screens: {
55 |         sm: '640px',
56 |         md: '768px',
57 |         lg: '1024px',
58 |         xl: '1280px'
59 |       }
60 |     },
61 |   },
62 |   plugins: [],
63 | } satisfies Config;
64 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------