From 5694df4adfd5f84bb2e232dd796c5c55780b615c Mon Sep 17 00:00:00 2001
From: Chris Veleris <chrisveleris@gmail.com>
Date: Thu, 24 Jul 2025 08:07:52 +0300
Subject: [PATCH] Split screen

---
 frontend/App.tsx                              |  12 +-
 frontend/components/Task/TaskDetails.tsx      | 544 ++++++++++++++++++
 .../Task/TaskForm/TaskContentSection.tsx      |  69 ++-
 frontend/components/Task/TaskItem.tsx         |  61 +-
 frontend/components/Task/TaskModal.tsx        | 148 ++---
 5 files changed, 659 insertions(+), 175 deletions(-)
 create mode 100644 frontend/components/Task/TaskDetails.tsx

diff --git a/frontend/App.tsx b/frontend/App.tsx
index 75295c8..b0ba589 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -17,7 +17,7 @@ import About from './components/About';
 import Layout from './Layout';
 import { User } from './entities/User';
 import TasksToday from './components/Task/TasksToday';
-import TaskView from './components/Task/TaskView';
+import TaskDetails from './components/Task/TaskDetails';
 import LoadingScreen from './components/Shared/LoadingScreen';
 import InboxItems from './components/Inbox/InboxItems';
 // Lazy load Tasks component to prevent issues with tags loading
@@ -25,14 +25,13 @@ const Tasks = lazy(() => import('./components/Tasks'));
 
 const App: React.FC = () => {
     const { i18n } = useTranslation();
+    const [currentUser, setCurrentUser] = useState<User | null>(null);
+    const [loading, setLoading] = useState(true);
 
     if (!i18n.isInitialized) {
         return <LoadingScreen />;
     }
 
-    const [currentUser, setCurrentUser] = useState<User | null>(null);
-    const [loading, setLoading] = useState(true);
-
     const fetchCurrentUser = async () => {
         try {
             const response = await fetch('/api/current_user', {
@@ -176,7 +175,10 @@ const App: React.FC = () => {
                                 element={<Navigate to="/today" replace />}
                             />
                             <Route path="/today" element={<TasksToday />} />
-                            <Route path="/task/:uuid" element={<TaskView />} />
+                            <Route
+                                path="/task/:uuid"
+                                element={<TaskDetails />}
+                            />
                             <Route
                                 path="/tasks"
                                 element={
diff --git a/frontend/components/Task/TaskDetails.tsx b/frontend/components/Task/TaskDetails.tsx
new file mode 100644
index 0000000..7ced37e
--- /dev/null
+++ b/frontend/components/Task/TaskDetails.tsx
@@ -0,0 +1,544 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+    PencilSquareIcon,
+    TrashIcon,
+    TagIcon,
+    FolderIcon,
+    CalendarIcon,
+    ExclamationTriangleIcon,
+    ArrowPathIcon,
+    ClockIcon,
+} from '@heroicons/react/24/outline';
+import ConfirmDialog from '../Shared/ConfirmDialog';
+import TaskModal from './TaskModal';
+import { Task } from '../../entities/Task';
+import { Project } from '../../entities/Project';
+import {
+    fetchTaskByUuid,
+    updateTask,
+    deleteTask,
+    fetchSubtasks,
+    toggleTaskCompletion,
+} from '../../utils/tasksService';
+import { createProject } from '../../utils/projectsService';
+import { useStore } from '../../store/useStore';
+import { useToast } from '../Shared/ToastContext';
+import TaskPriorityIcon from './TaskPriorityIcon';
+import LoadingScreen from '../Shared/LoadingScreen';
+import MarkdownRenderer from '../Shared/MarkdownRenderer';
+import TimelinePanel from './TimelinePanel';
+
+const TaskDetails: React.FC = () => {
+    const { uuid } = useParams<{ uuid: string }>();
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const { showSuccessToast, showErrorToast } = useToast();
+
+    const projects = useStore((state) => state.projectsStore.projects);
+
+    // Local state
+    const [task, setTask] = useState<Task | null>(null);
+    const [subtasks, setSubtasks] = useState<Task[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+    const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
+    const [taskToDelete, setTaskToDelete] = useState<Task | null>(null);
+    const [isTimelineExpanded, setIsTimelineExpanded] = useState(false);
+
+    // Date and recurrence formatting functions (from TaskHeader)
+    const formatDueDate = (dueDate: string) => {
+        const today = new Date().toISOString().split('T')[0];
+        const tomorrow = new Date(Date.now() + 24 * 60 * 60 * 1000)
+            .toISOString()
+            .split('T')[0];
+        const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000)
+            .toISOString()
+            .split('T')[0];
+        if (dueDate === today) return t('dateIndicators.today', 'TODAY');
+        if (dueDate === tomorrow)
+            return t('dateIndicators.tomorrow', 'TOMORROW');
+        if (dueDate === yesterday)
+            return t('dateIndicators.yesterday', 'YESTERDAY');
+
+        return new Date(dueDate).toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    };
+
+    const formatRecurrence = (recurrenceType: string) => {
+        switch (recurrenceType) {
+            case 'daily':
+                return t('recurrence.daily', 'Daily');
+            case 'weekly':
+                return t('recurrence.weekly', 'Weekly');
+            case 'monthly':
+                return t('recurrence.monthly', 'Monthly');
+            case 'monthly_weekday':
+                return t('recurrence.monthlyWeekday', 'Monthly');
+            case 'monthly_last_day':
+                return t('recurrence.monthlyLastDay', 'Monthly');
+            default:
+                return t('recurrence.recurring', 'Recurring');
+        }
+    };
+
+    useEffect(() => {
+        const fetchTaskData = async () => {
+            if (!uuid) {
+                setError('No task UUID provided');
+                setLoading(false);
+                return;
+            }
+
+            try {
+                setLoading(true);
+                const taskData = await fetchTaskByUuid(uuid);
+                setTask(taskData);
+
+                // Load subtasks if this task has any
+                if (taskData.id) {
+                    try {
+                        const subtasksData = await fetchSubtasks(taskData.id);
+                        setSubtasks(subtasksData);
+                    } catch (subtaskError) {
+                        console.warn('Error loading subtasks:', subtaskError);
+                        // Don't fail the whole page if subtasks fail to load
+                    }
+                }
+            } catch (fetchError) {
+                setError('Task not found');
+                console.error('Error fetching task:', fetchError);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchTaskData();
+    }, [uuid]);
+
+    const handleEdit = () => {
+        setIsTaskModalOpen(true);
+    };
+
+    const handleToggleCompletion = async () => {
+        if (!task?.id) return;
+
+        try {
+            const updatedTask = await toggleTaskCompletion(task.id);
+            setTask(updatedTask);
+
+            const statusMessage =
+                updatedTask.status === 'done' || updatedTask.status === 2
+                    ? t('task.completedSuccess', 'Task marked as completed')
+                    : t('task.reopenedSuccess', 'Task reopened');
+
+            showSuccessToast(statusMessage);
+        } catch (error) {
+            console.error('Error toggling task completion:', error);
+            showErrorToast(
+                t('task.toggleError', 'Failed to update task status')
+            );
+        }
+    };
+
+    const handleTaskUpdate = async (updatedTask: Task) => {
+        try {
+            if (task?.id) {
+                const updated = await updateTask(task.id, updatedTask);
+                setTask(updated);
+                showSuccessToast(
+                    t('task.updateSuccess', 'Task updated successfully')
+                );
+
+                // Reload subtasks in case they changed
+                if (updated.id) {
+                    try {
+                        const subtasksData = await fetchSubtasks(updated.id);
+                        setSubtasks(subtasksData);
+                    } catch (subtaskError) {
+                        console.warn('Error reloading subtasks:', subtaskError);
+                    }
+                }
+            }
+            setIsTaskModalOpen(false);
+        } catch (error) {
+            console.error('Error updating task:', error);
+            showErrorToast(t('task.updateError', 'Failed to update task'));
+        }
+    };
+
+    const handleDeleteClick = () => {
+        if (task) {
+            setTaskToDelete(task);
+            setIsConfirmDialogOpen(true);
+        }
+    };
+
+    const handleDeleteConfirm = async () => {
+        if (taskToDelete?.id) {
+            try {
+                await deleteTask(taskToDelete.id);
+                showSuccessToast(
+                    t('task.deleteSuccess', 'Task deleted successfully')
+                );
+                navigate('/today'); // Navigate back to today view after deletion
+            } catch (error) {
+                console.error('Error deleting task:', error);
+                showErrorToast(t('task.deleteError', 'Failed to delete task'));
+            }
+        }
+        setIsConfirmDialogOpen(false);
+        setTaskToDelete(null);
+    };
+
+    const handleCreateProject = async (name: string): Promise<Project> => {
+        try {
+            return await createProject({ name });
+        } catch (error) {
+            console.error('Error creating project:', error);
+            throw error;
+        }
+    };
+
+    const handleSubtaskClick = (subtask: Task) => {
+        if (subtask.uuid) {
+            navigate(`/task/${subtask.uuid}`);
+        }
+    };
+
+    if (loading) {
+        return <LoadingScreen />;
+    }
+
+    if (error || !task) {
+        return (
+            <div className="flex justify-center px-4 lg:px-2">
+                <div className="w-full max-w-5xl">
+                    <div className="min-h-[60vh] flex flex-col items-center justify-center text-center">
+                        <ExclamationTriangleIcon className="h-24 w-24 text-gray-400 dark:text-gray-500 mx-auto mb-8" />
+                        <h1 className="text-2xl font-medium text-gray-700 dark:text-gray-300 mb-4">
+                            {error || t('task.notFound', 'Task Not Found')}
+                        </h1>
+                        <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
+                            {t(
+                                'task.notFoundDescription',
+                                'The task you are looking for does not exist or has been deleted.'
+                            )}
+                        </p>
+                        <button
+                            onClick={() => navigate('/today')}
+                            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors duration-200"
+                        >
+                            {t('common.goToToday', 'Go to Today')}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex justify-center px-4 lg:px-2">
+            <div className="w-full max-w-5xl">
+                {/* Header Section with Title and Action Buttons */}
+                <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center space-x-3">
+                        <TaskPriorityIcon
+                            priority={task.priority}
+                            status={task.status}
+                            onToggleCompletion={handleToggleCompletion}
+                        />
+                        <div className="flex flex-col">
+                            <h2 className="text-2xl font-light text-gray-900 dark:text-gray-100">
+                                {task.name}
+                            </h2>
+                            {/* Project, tags, due date, and recurrence under title */}
+                            {(task.Project ||
+                                (task.tags && task.tags.length > 0) ||
+                                task.due_date ||
+                                (task.recurrence_type &&
+                                    task.recurrence_type !== 'none')) && (
+                                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mt-1">
+                                    {task.Project && (
+                                        <div className="flex items-center">
+                                            <FolderIcon className="h-3 w-3 mr-1" />
+                                            <Link
+                                                to={`/project/${task.Project.id}`}
+                                                className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
+                                            >
+                                                {task.Project.name}
+                                            </Link>
+                                        </div>
+                                    )}
+                                    {task.Project &&
+                                        task.tags &&
+                                        task.tags.length > 0 && (
+                                            <span className="mx-2">•</span>
+                                        )}
+                                    {task.tags && task.tags.length > 0 && (
+                                        <div className="flex items-center">
+                                            <TagIcon className="h-3 w-3 mr-1" />
+                                            <span>
+                                                {task.tags.map((tag, index) => (
+                                                    <React.Fragment
+                                                        key={tag.id || tag.name}
+                                                    >
+                                                        <Link
+                                                            to={`/tag/${encodeURIComponent(tag.name)}`}
+                                                            className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
+                                                        >
+                                                            {tag.name}
+                                                        </Link>
+                                                        {index <
+                                                            task.tags!.length -
+                                                                1 && ', '}
+                                                    </React.Fragment>
+                                                ))}
+                                            </span>
+                                        </div>
+                                    )}
+                                    {(task.Project ||
+                                        (task.tags && task.tags.length > 0)) &&
+                                        task.due_date && (
+                                            <span className="mx-2">•</span>
+                                        )}
+                                    {task.due_date && (
+                                        <div className="flex items-center">
+                                            <CalendarIcon className="h-3 w-3 mr-1" />
+                                            <span>
+                                                {formatDueDate(task.due_date)}
+                                            </span>
+                                        </div>
+                                    )}
+                                    {(task.Project ||
+                                        (task.tags && task.tags.length > 0) ||
+                                        task.due_date) &&
+                                        task.recurrence_type &&
+                                        task.recurrence_type !== 'none' && (
+                                            <span className="mx-2">•</span>
+                                        )}
+                                    {task.recurrence_type &&
+                                        task.recurrence_type !== 'none' && (
+                                            <div className="flex items-center">
+                                                <ArrowPathIcon className="h-3 w-3 mr-1" />
+                                                <span>
+                                                    {formatRecurrence(
+                                                        task.recurrence_type
+                                                    )}
+                                                </span>
+                                            </div>
+                                        )}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div className="flex space-x-2">
+                        <button
+                            onClick={() =>
+                                setIsTimelineExpanded(!isTimelineExpanded)
+                            }
+                            className={`p-2 rounded-full transition-colors duration-200 ${
+                                isTimelineExpanded
+                                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
+                                    : 'text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400'
+                            }`}
+                            title={
+                                isTimelineExpanded
+                                    ? 'Hide Activity Timeline'
+                                    : 'Show Activity Timeline'
+                            }
+                        >
+                            <ClockIcon className="h-5 w-5" />
+                        </button>
+                        <button
+                            onClick={handleEdit}
+                            className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-full transition-colors duration-200"
+                        >
+                            <PencilSquareIcon className="h-5 w-5" />
+                        </button>
+                        <button
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleDeleteClick();
+                            }}
+                            className="p-2 text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 rounded-full transition-colors duration-200"
+                        >
+                            <TrashIcon className="h-5 w-5" />
+                        </button>
+                    </div>
+                </div>
+
+                {/* Content - Two column layout for notes and subtasks */}
+                {(task.note || subtasks.length > 0) && (
+                    <div className="mb-8 mt-8">
+                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                            {/* Notes Column */}
+                            {task.note && (
+                                <div>
+                                    <h4 className="text-base font-light text-gray-900 dark:text-gray-100 mb-4">
+                                        {t('task.notes', 'Notes')}
+                                    </h4>
+                                    <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-6">
+                                        <MarkdownRenderer
+                                            content={task.note}
+                                            className="prose dark:prose-invert max-w-none"
+                                        />
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* Subtasks Column */}
+                            {subtasks.length > 0 && (
+                                <div>
+                                    <h4 className="text-sm font-light text-gray-900 dark:text-gray-100 mb-4">
+                                        {t('task.subtasks', 'Subtasks')}
+                                    </h4>
+                                    <div className="space-y-1">
+                                        {subtasks.map((subtask) => (
+                                            <div
+                                                key={subtask.id}
+                                                className="group"
+                                            >
+                                                <div
+                                                    onClick={() =>
+                                                        handleSubtaskClick(
+                                                            subtask
+                                                        )
+                                                    }
+                                                    className={`rounded-lg shadow-sm bg-white dark:bg-gray-900 border-2 cursor-pointer transition-all duration-200 ${
+                                                        subtask.status ===
+                                                            'in_progress' ||
+                                                        subtask.status === 1
+                                                            ? 'border-green-400/60 dark:border-green-500/60'
+                                                            : 'border-gray-50 dark:border-gray-800'
+                                                    }`}
+                                                >
+                                                    <div className="px-4 py-2.5 flex items-center space-x-3">
+                                                        <div className="flex-shrink-0">
+                                                            <TaskPriorityIcon
+                                                                priority={
+                                                                    subtask.priority
+                                                                }
+                                                                status={
+                                                                    subtask.status
+                                                                }
+                                                                onToggleCompletion={async () => {
+                                                                    if (
+                                                                        subtask.id
+                                                                    ) {
+                                                                        try {
+                                                                            await toggleTaskCompletion(
+                                                                                subtask.id
+                                                                            );
+                                                                            // Reload subtasks after toggling completion
+                                                                            if (
+                                                                                task?.id
+                                                                            ) {
+                                                                                const subtasksData =
+                                                                                    await fetchSubtasks(
+                                                                                        task.id
+                                                                                    );
+                                                                                setSubtasks(
+                                                                                    subtasksData
+                                                                                );
+                                                                            }
+                                                                        } catch (error) {
+                                                                            console.error(
+                                                                                'Error toggling subtask completion:',
+                                                                                error
+                                                                            );
+                                                                        }
+                                                                    }
+                                                                }}
+                                                            />
+                                                        </div>
+                                                        <span
+                                                            className={`text-base flex-1 truncate ${
+                                                                subtask.status ===
+                                                                    'done' ||
+                                                                subtask.status ===
+                                                                    2 ||
+                                                                subtask.status ===
+                                                                    'archived' ||
+                                                                subtask.status ===
+                                                                    3
+                                                                    ? 'text-gray-500 dark:text-gray-400'
+                                                                    : 'text-gray-900 dark:text-gray-100'
+                                                            }`}
+                                                        >
+                                                            {subtask.name}
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                {/* Activity Timeline */}
+                {isTimelineExpanded && task?.id && (
+                    <div className="mb-8 mt-8">
+                        <TimelinePanel
+                            taskId={task.id}
+                            isExpanded={isTimelineExpanded}
+                            onToggle={() =>
+                                setIsTimelineExpanded(!isTimelineExpanded)
+                            }
+                        />
+                    </div>
+                )}
+
+                {/* Task Modal for Editing */}
+                <TaskModal
+                    isOpen={isTaskModalOpen}
+                    task={
+                        task || {
+                            name: '',
+                            status: 'not_started',
+                            priority: 'medium',
+                            completed_at: null,
+                        }
+                    }
+                    onClose={() => setIsTaskModalOpen(false)}
+                    onSave={handleTaskUpdate}
+                    onDelete={async (taskId: number) => {
+                        await deleteTask(taskId);
+                        navigate('/today');
+                    }}
+                    projects={projects}
+                    onCreateProject={handleCreateProject}
+                    showToast={false}
+                    initialSubtasks={subtasks}
+                />
+
+                {/* Confirm Delete Dialog */}
+                {isConfirmDialogOpen && taskToDelete && (
+                    <ConfirmDialog
+                        title={t('task.deleteConfirmTitle', 'Delete Task')}
+                        message={t(
+                            'task.deleteConfirmMessage',
+                            'Are you sure you want to delete this task? This action cannot be undone.'
+                        )}
+                        onConfirm={handleDeleteConfirm}
+                        onCancel={() => {
+                            setIsConfirmDialogOpen(false);
+                            setTaskToDelete(null);
+                        }}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default TaskDetails;
diff --git a/frontend/components/Task/TaskForm/TaskContentSection.tsx b/frontend/components/Task/TaskForm/TaskContentSection.tsx
index ae8edc1..1f062c9 100644
--- a/frontend/components/Task/TaskForm/TaskContentSection.tsx
+++ b/frontend/components/Task/TaskForm/TaskContentSection.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { EyeIcon, PencilIcon } from '@heroicons/react/24/outline';
+import MarkdownRenderer from '../../Shared/MarkdownRenderer';
 
 interface TaskContentSectionProps {
     taskId: number | undefined;
@@ -13,20 +15,65 @@ const TaskContentSection: React.FC<TaskContentSectionProps> = ({
     onChange,
 }) => {
     const { t } = useTranslation();
+    const [activeTab, setActiveTab] = useState<'edit' | 'preview'>('edit');
 
     return (
         <div className="px-4 py-4 border-b border-gray-200 dark:border-gray-700 flex-1 flex flex-col mb-2">
-            <textarea
-                id={`task_note_${taskId}`}
-                name="note"
-                value={value}
-                onChange={onChange}
-                className="block w-full border-0 focus:outline-none focus:ring-0 p-3 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 resize-none flex-1 min-h-0"
-                placeholder={t(
-                    'forms.noteContentPlaceholder',
-                    'Add task description...'
+            {/* Content area with floating buttons */}
+            <div className="relative flex-1 flex flex-col">
+                {/* Floating toggle buttons */}
+                <div className="absolute top-2 right-2 z-10 flex space-x-1">
+                    <button
+                        type="button"
+                        onClick={() => setActiveTab('edit')}
+                        className={`p-1.5 rounded-md transition-colors ${
+                            activeTab === 'edit'
+                                ? 'bg-blue-600 text-white'
+                                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
+                        }`}
+                        title="Edit"
+                    >
+                        <PencilIcon className="h-3 w-3" />
+                    </button>
+                    <button
+                        type="button"
+                        onClick={() => setActiveTab('preview')}
+                        className={`p-1.5 rounded-md transition-colors ${
+                            activeTab === 'preview'
+                                ? 'bg-blue-600 text-white'
+                                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
+                        }`}
+                        title="Preview"
+                    >
+                        <EyeIcon className="h-3 w-3" />
+                    </button>
+                </div>
+
+                {activeTab === 'edit' ? (
+                    <textarea
+                        id={`task_note_${taskId}`}
+                        name="note"
+                        value={value}
+                        onChange={onChange}
+                        className="block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm p-3 pr-20 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 resize-none flex-1 min-h-0 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out"
+                        placeholder={t(
+                            'forms.noteContentPlaceholder',
+                            'Add task description using Markdown formatting...\n\nExamples:\n# Heading\n**Bold text**\n*Italic text*\n- List item\n```code```'
+                        )}
+                    />
+                ) : (
+                    <div className="block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm p-3 pr-20 text-sm bg-gray-50 dark:bg-gray-800 flex-1 min-h-0 overflow-y-auto">
+                        {value ? (
+                            <MarkdownRenderer content={value} />
+                        ) : (
+                            <p className="text-gray-500 dark:text-gray-400 italic">
+                                No content to preview. Switch to Edit mode to
+                                add content.
+                            </p>
+                        )}
+                    </div>
                 )}
-            />
+            </div>
         </div>
     );
 };
diff --git a/frontend/components/Task/TaskItem.tsx b/frontend/components/Task/TaskItem.tsx
index ba34c34..1b6d9bb 100644
--- a/frontend/components/Task/TaskItem.tsx
+++ b/frontend/components/Task/TaskItem.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Task } from '../../entities/Task';
 import { Project } from '../../entities/Project';
 import TaskHeader from './TaskHeader';
@@ -124,11 +125,7 @@ const SubtasksDisplay: React.FC<SubtasksDisplayProps> = ({
     );
 };
 import TaskModal from './TaskModal';
-import {
-    toggleTaskCompletion,
-    fetchSubtasks,
-    fetchTaskById,
-} from '../../utils/tasksService';
+import { toggleTaskCompletion, fetchSubtasks } from '../../utils/tasksService';
 import { isTaskOverdue } from '../../utils/dateUtils';
 import { useTranslation } from 'react-i18next';
 
@@ -151,23 +148,8 @@ const TaskItem: React.FC<TaskItemProps> = ({
     hideProjectName = false,
     onToggleToday,
 }) => {
-    // Use task ID as key for modal state to persist across task prop changes
-    const [modalOpenTaskId, setModalOpenTaskId] = useState<number | null>(null);
-    const isModalOpen = modalOpenTaskId === task.id;
-
-    // Wrapper function for setting modal state
-    const setIsModalOpen = (value: boolean) => {
-        if (value) {
-            setModalOpenTaskId(task.id || null);
-        } else {
-            setModalOpenTaskId(null);
-        }
-    };
-
-    // Update projectList when projects prop changes
-    useEffect(() => {
-        setProjectList(projects);
-    }, [projects]);
+    const navigate = useNavigate();
+    const [isModalOpen, setIsModalOpen] = useState(false);
     const [subtaskModalOpen, setSubtaskModalOpen] = useState(false);
     const [selectedSubtask, setSelectedSubtask] = useState<Task | null>(null);
     const [projectList, setProjectList] = useState<Project[]>(projects);
@@ -180,6 +162,11 @@ const TaskItem: React.FC<TaskItemProps> = ({
     const [loadingSubtasks, setLoadingSubtasks] = useState(false);
     const [hasSubtasks, setHasSubtasks] = useState(false);
 
+    // Update projectList when projects prop changes
+    useEffect(() => {
+        setProjectList(projects);
+    }, [projects]);
+
     // Calculate completion percentage
     const calculateCompletionPercentage = () => {
         if (subtasks.length === 0) return 0;
@@ -248,34 +235,16 @@ const TaskItem: React.FC<TaskItemProps> = ({
         setShowSubtasks(!showSubtasks);
     };
 
-    const handleTaskClick = (e?: React.MouseEvent) => {
-        if (e) {
-            e.preventDefault();
-            e.stopPropagation();
+    const handleTaskClick = () => {
+        if (task.uuid) {
+            navigate(`/task/${task.uuid}`);
         }
-        // Use setTimeout to ensure state update happens after any other processing
-        setTimeout(() => {
-            setIsModalOpen(true);
-        }, 0);
     };
 
     const handleSubtaskClick = async (subtask: Task) => {
-        // If subtask has a parent_task_id, open the parent task with subtasks focus
-        if (subtask.parent_task_id) {
-            try {
-                const parentTask = await fetchTaskById(subtask.parent_task_id);
-                setParentTask(parentTask);
-                setParentTaskModalOpen(true);
-            } catch (error) {
-                console.error('Error fetching parent task:', error);
-                // Fall back to opening the subtask itself
-                setSelectedSubtask(subtask);
-                setSubtaskModalOpen(true);
-            }
-        } else {
-            // If no parent_task_id, open the subtask itself
-            setSelectedSubtask(subtask);
-            setSubtaskModalOpen(true);
+        // Navigate directly to the subtask URL
+        if (subtask.uuid) {
+            navigate(`/task/${subtask.uuid}`);
         }
     };
 
diff --git a/frontend/components/Task/TaskModal.tsx b/frontend/components/Task/TaskModal.tsx
index 8f168de..d118988 100644
--- a/frontend/components/Task/TaskModal.tsx
+++ b/frontend/components/Task/TaskModal.tsx
@@ -3,18 +3,15 @@ import { createPortal } from 'react-dom';
 import { PriorityType, Task } from '../../entities/Task';
 import ConfirmDialog from '../Shared/ConfirmDialog';
 import { useToast } from '../Shared/ToastContext';
-import TimelinePanel from './TimelinePanel';
 import { Project } from '../../entities/Project';
 import { useStore } from '../../store/useStore';
-import { fetchTaskById, fetchSubtasks } from '../../utils/tasksService';
-import { getTaskIntelligenceEnabled } from '../../utils/profileService';
+import { fetchTaskById } from '../../utils/tasksService';
 import {
     analyzeTaskName,
     TaskAnalysis,
 } from '../../utils/taskIntelligenceService';
 import { useTranslation } from 'react-i18next';
 import {
-    ClockIcon,
     TagIcon,
     FolderIcon,
     ArrowPathIcon,
@@ -45,6 +42,7 @@ interface TaskModalProps {
     onEditParentTask?: (parentTask: Task) => void;
     autoFocusSubtasks?: boolean;
     showToast?: boolean;
+    initialSubtasks?: Task[];
 }
 
 const TaskModal: React.FC<TaskModalProps> = ({
@@ -58,9 +56,11 @@ const TaskModal: React.FC<TaskModalProps> = ({
     onEditParentTask,
     autoFocusSubtasks,
     showToast = true,
+    initialSubtasks = [],
 }) => {
     const { tagsStore } = useStore();
-    const availableTags = tagsStore.getTags();
+    // Avoid calling getTags() during component initialization to prevent remounting
+    const availableTags = tagsStore.tags;
     const { addNewTags } = tagsStore;
     const [formData, setFormData] = useState<Task>(task);
     const [tags, setTags] = useState<string[]>(
@@ -78,11 +78,8 @@ const TaskModal: React.FC<TaskModalProps> = ({
     const [parentTask, setParentTask] = useState<Task | null>(null);
     const [parentTaskLoading, setParentTaskLoading] = useState(false);
     const [taskAnalysis, setTaskAnalysis] = useState<TaskAnalysis | null>(null);
-    const [taskIntelligenceEnabled, setTaskIntelligenceEnabled] =
-        useState(true);
-    const [isTimelineExpanded, setIsTimelineExpanded] = useState(false);
+    const [taskIntelligenceEnabled] = useState(true);
     const [subtasks, setSubtasks] = useState<Task[]>([]);
-    const [subtasksLoaded, setSubtasksLoaded] = useState(false);
 
     // Collapsible section states
     const [expandedSections, setExpandedSections] = useState({
@@ -163,21 +160,24 @@ const TaskModal: React.FC<TaskModalProps> = ({
         );
         setNewProjectName(currentProject ? currentProject.name : '');
 
-        // Fetch parent task if this is a child task
+        // Fetch parent task if this is a child task - but don't block rendering
         const fetchParentTask = async () => {
             if (task.recurring_parent_id && isOpen) {
                 setParentTaskLoading(true);
-                try {
-                    const parent = await fetchTaskById(
-                        task.recurring_parent_id
-                    );
-                    setParentTask(parent);
-                } catch (error) {
-                    console.error('Error fetching parent task:', error);
-                    setParentTask(null);
-                } finally {
-                    setParentTaskLoading(false);
-                }
+                // Use setTimeout to not block initial render
+                setTimeout(async () => {
+                    try {
+                        const parent = await fetchTaskById(
+                            task.recurring_parent_id
+                        );
+                        setParentTask(parent);
+                    } catch (error) {
+                        console.error('Error fetching parent task:', error);
+                        setParentTask(null);
+                    } finally {
+                        setParentTaskLoading(false);
+                    }
+                }, 0);
             } else {
                 setParentTask(null);
             }
@@ -186,25 +186,8 @@ const TaskModal: React.FC<TaskModalProps> = ({
         fetchParentTask();
     }, [task, projects, isOpen, taskIntelligenceEnabled]);
 
-    // Fetch task intelligence setting when modal opens
-    useEffect(() => {
-        const fetchTaskIntelligenceSetting = async () => {
-            if (isOpen) {
-                try {
-                    const enabled = await getTaskIntelligenceEnabled();
-                    setTaskIntelligenceEnabled(enabled);
-                } catch (error) {
-                    console.error(
-                        'Error fetching task intelligence setting:',
-                        error
-                    );
-                    setTaskIntelligenceEnabled(true); // Default to enabled
-                }
-            }
-        };
-
-        fetchTaskIntelligenceSetting();
-    }, [isOpen]);
+    // Don't fetch task intelligence setting - use default enabled state
+    // This prevents unnecessary API calls when opening the modal
 
     // Auto-focus on subtasks section when modal opens
     useEffect(() => {
@@ -220,8 +203,12 @@ const TaskModal: React.FC<TaskModalProps> = ({
         }
     }, [isOpen, autoFocusSubtasks]);
 
-    // Tags refreshing removed to prevent modal closing issues
-    // Tags will be loaded automatically when accessed via getTags() in the store
+    // Load tags when modal opens if not already loaded
+    useEffect(() => {
+        if (isOpen && !tagsStore.hasLoaded && !tagsStore.isLoading) {
+            tagsStore.loadTags();
+        }
+    }, [isOpen, tagsStore.hasLoaded, tagsStore.isLoading, tagsStore.loadTags]);
 
     const handleEditParent = () => {
         if (parentTask && onEditParentTask) {
@@ -436,28 +423,16 @@ const TaskModal: React.FC<TaskModalProps> = ({
         };
     }, [isOpen]);
 
-    // Load existing subtasks when modal opens (only if not already loaded)
+    // Load existing subtasks when modal opens - use initialSubtasks if provided, no fetching
     useEffect(() => {
-        if (isOpen && task.id && !subtasksLoaded) {
-            const loadExistingSubtasks = async () => {
-                try {
-                    const existingSubtasks = await fetchSubtasks(task.id!);
-                    setSubtasks(existingSubtasks);
-                    setSubtasksLoaded(true);
-                } catch {
-                    // Handle silently - don't show error for this
-                    setSubtasks([]);
-                    setSubtasksLoaded(true);
-                }
-            };
-
-            loadExistingSubtasks();
+        if (isOpen && task.id) {
+            // Always use provided initial subtasks (from parent component) or empty array
+            setSubtasks(initialSubtasks);
         } else if (!isOpen) {
             // Reset subtasks when modal closes
             setSubtasks([]);
-            setSubtasksLoaded(false);
         }
-    }, [isOpen, task.id, subtasksLoaded]);
+    }, [isOpen, task.id, initialSubtasks]);
 
     if (!isOpen) return null;
 
@@ -491,11 +466,7 @@ const TaskModal: React.FC<TaskModalProps> = ({
                     >
                         <div className="flex flex-col lg:flex-row h-full sm:min-h-[600px] sm:max-h-[90vh]">
                             {/* Main Form Section */}
-                            <div
-                                className={`flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-l-lg ${
-                                    isTimelineExpanded ? 'lg:pr-2' : ''
-                                }`}
-                            >
+                            <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-lg">
                                 <div className="flex-1 relative">
                                     <div
                                         className="absolute inset-0 overflow-y-auto overflow-x-hidden"
@@ -724,21 +695,6 @@ const TaskModal: React.FC<TaskModalProps> = ({
                                     </div>
                                 </div>
 
-                                {/* Timeline Panel - Show when expanded on mobile only */}
-                                {isTimelineExpanded && (
-                                    <div className="lg:hidden border-t border-gray-200 dark:border-gray-700">
-                                        <TimelinePanel
-                                            taskId={task.id}
-                                            isExpanded={isTimelineExpanded}
-                                            onToggle={() =>
-                                                setIsTimelineExpanded(
-                                                    !isTimelineExpanded
-                                                )
-                                            }
-                                        />
-                                    </div>
-                                )}
-
                                 {/* Section Icons - Above border, split layout */}
                                 <div className="flex-shrink-0 bg-white dark:bg-gray-800 px-3 py-2">
                                     <div className="flex items-center justify-between">
@@ -875,31 +831,6 @@ const TaskModal: React.FC<TaskModalProps> = ({
                                                 )}
                                             </button>
                                         </div>
-
-                                        {/* Right side: Timeline Toggle Button */}
-                                        <button
-                                            onClick={() =>
-                                                setIsTimelineExpanded(
-                                                    !isTimelineExpanded
-                                                )
-                                            }
-                                            className={`p-2 rounded-full transition-colors ${
-                                                isTimelineExpanded
-                                                    ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
-                                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
-                                            }`}
-                                            title={
-                                                isTimelineExpanded
-                                                    ? t(
-                                                          'timeline.hideActivityTimeline'
-                                                      )
-                                                    : t(
-                                                          'timeline.showActivityTimeline'
-                                                      )
-                                            }
-                                        >
-                                            <ClockIcon className="h-5 w-5" />
-                                        </button>
                                     </div>
                                 </div>
 
@@ -939,15 +870,6 @@ const TaskModal: React.FC<TaskModalProps> = ({
                                     </button>
                                 </div>
                             </div>
-
-                            {/* Timeline Panel - Desktop Sidebar */}
-                            <TimelinePanel
-                                taskId={task.id}
-                                isExpanded={isTimelineExpanded}
-                                onToggle={() =>
-                                    setIsTimelineExpanded(!isTimelineExpanded)
-                                }
-                            />
                         </div>
                     </div>
                 </div>