From bc67d9fd28b1d2e618121efdcbbb93e6b5c89e89 Mon Sep 17 00:00:00 2001
From: Chris Veleris <chrisveleris@gmail.com>
Date: Wed, 9 Jul 2025 22:53:05 +0300
Subject: [PATCH] Make all templates consistent

---
 frontend/components/Areas.tsx            |  12 +-
 frontend/components/Inbox/InboxItems.tsx | 230 ++++++++++++-----------
 frontend/components/Notes.tsx            |  12 +-
 frontend/components/Projects.tsx         |   6 +-
 frontend/components/Tags.tsx             |  12 +-
 frontend/components/Tasks.tsx            |   2 +-
 6 files changed, 136 insertions(+), 138 deletions(-)

diff --git a/frontend/components/Areas.tsx b/frontend/components/Areas.tsx
index 06cb545..858d0f6 100644
--- a/frontend/components/Areas.tsx
+++ b/frontend/components/Areas.tsx
@@ -107,13 +107,11 @@ const Areas: React.FC = () => {
         <div className="flex justify-center px-4 lg:px-2">
             <div className="w-full max-w-5xl">
                 {/* Areas Header */}
-                <div className="flex items-center justify-between mb-8">
-                    <div className="flex items-center">
-                        <Squares2X2Icon className="h-6 w-6 mr-2 text-gray-900 dark:text-white" />
-                        <h2 className="text-2xl font-light text-gray-900 dark:text-white">
-                            {t('areas.title')}
-                        </h2>
-                    </div>
+                <div className="flex items-center mb-8">
+                    <Squares2X2Icon className="h-6 w-6 mr-2" />
+                    <h2 className="text-2xl font-light">
+                        {t('areas.title')}
+                    </h2>
                 </div>
 
                 {/* Areas List */}
diff --git a/frontend/components/Inbox/InboxItems.tsx b/frontend/components/Inbox/InboxItems.tsx
index 066ce5a..8f524af 100644
--- a/frontend/components/Inbox/InboxItems.tsx
+++ b/frontend/components/Inbox/InboxItems.tsx
@@ -336,136 +336,140 @@ const InboxItems: React.FC = () => {
         return <LoadingScreen />;
     }
 
-    if (inboxItems.length === 0) {
-        return (
-            <div className="flex flex-col items-center justify-center p-8 space-y-4 text-center text-gray-600 dark:text-gray-300">
-                <InboxIcon className="h-16 w-16" />
-                <h3 className="text-xl font-semibold">{t('inbox.empty')}</h3>
-                <p>{t('inbox.emptyDescription')}</p>
-            </div>
-        );
-    }
-
     return (
-        <div className="container mx-auto p-4">
-            <div className="flex items-center mb-8">
-                <InboxIcon className="h-6 w-6 mr-2" />
-                <h1 className="text-2xl font-light">{t('inbox.title')}</h1>
-            </div>
+        <div className="flex justify-center px-4 lg:px-2">
+            <div className="w-full max-w-5xl">
+                <div className="flex items-center mb-8">
+                    <InboxIcon className="h-6 w-6 mr-2" />
+                    <h1 className="text-2xl font-light">{t('inbox.title')}</h1>
+                </div>
 
-            <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
-                {t(
-                    'taskViews.inbox',
-                    "Inbox is where all uncategorized tasks are located. Tasks that have not been assigned to a project or don't have a due date will appear here. This is your 'brain dump' area where you can quickly note down tasks and organize them later."
+                <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
+                    {t(
+                        'taskViews.inbox',
+                        "Inbox is where all uncategorized tasks are located. Tasks that have not been assigned to a project or don't have a due date will appear here. This is your 'brain dump' area where you can quickly note down tasks and organize them later."
+                    )}
+                </p>
+
+                {inboxItems.length === 0 ? (
+                    <div className="text-center py-8">
+                        <InboxIcon className="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
+                        <p className="text-gray-500 dark:text-gray-400 mb-2">
+                            {t('inbox.empty')}
+                        </p>
+                        <p className="text-sm text-gray-400 dark:text-gray-500">
+                            {t('inbox.emptyDescription')}
+                        </p>
+                    </div>
+                ) : (
+                    <div className="space-y-2">
+                        {inboxItems.map((item) => (
+                            <InboxItemDetail
+                                key={item.id}
+                                item={item}
+                                onProcess={handleProcessItem}
+                                onDelete={handleDeleteItem}
+                                onUpdate={handleUpdateItem}
+                                openTaskModal={handleOpenTaskModal}
+                                openProjectModal={handleOpenProjectModal}
+                                openNoteModal={handleOpenNoteModal}
+                            />
+                        ))}
+                    </div>
                 )}
-            </p>
 
-            <div className="space-y-2">
-                {inboxItems.map((item) => (
-                    <InboxItemDetail
-                        key={item.id}
-                        item={item}
-                        onProcess={handleProcessItem}
-                        onDelete={handleDeleteItem}
-                        onUpdate={handleUpdateItem}
-                        openTaskModal={handleOpenTaskModal}
-                        openProjectModal={handleOpenProjectModal}
-                        openNoteModal={handleOpenNoteModal}
-                    />
-                ))}
-            </div>
-
-            {/* Task Modal - Always render it but control visibility with isOpen */}
-            {/* Add error boundary protection for modal rendering */}
-            {(() => {
-                try {
-                    return (
-                        <TaskModal
-                            isOpen={isTaskModalOpen}
-                            onClose={() => {
-                                setIsTaskModalOpen(false);
-                                setTaskToEdit(null);
-                            }}
-                            task={
-                                taskToEdit || {
-                                    name: '',
-                                    status: 'not_started',
-                                    priority: 'medium',
-                                }
-                            }
-                            onSave={handleSaveTask}
-                            onDelete={async () => {}} // No need to delete since it's a new task
-                            projects={Array.isArray(projects) ? projects : []}
-                            onCreateProject={handleCreateProject}
-                        />
-                    );
-                } catch (error) {
-                    console.error('TaskModal rendering error:', error);
-                    return null;
-                }
-            })()}
-
-            {/* Project Modal - Only render when needed to prevent infinite loops */}
-            {isProjectModalOpen &&
-                (() => {
+                {/* Task Modal - Always render it but control visibility with isOpen */}
+                {/* Add error boundary protection for modal rendering */}
+                {(() => {
                     try {
                         return (
-                            <ProjectModal
-                                isOpen={isProjectModalOpen}
+                            <TaskModal
+                                isOpen={isTaskModalOpen}
                                 onClose={() => {
-                                    setIsProjectModalOpen(false);
-                                    setProjectToEdit(null);
+                                    setIsTaskModalOpen(false);
+                                    setTaskToEdit(null);
                                 }}
-                                onSave={handleSaveProject}
-                                project={projectToEdit || undefined}
-                                areas={[]}
+                                task={
+                                    taskToEdit || {
+                                        name: '',
+                                        status: 'not_started',
+                                        priority: 'medium',
+                                    }
+                                }
+                                onSave={handleSaveTask}
+                                onDelete={async () => {}} // No need to delete since it's a new task
+                                projects={Array.isArray(projects) ? projects : []}
+                                onCreateProject={handleCreateProject}
                             />
                         );
                     } catch (error) {
-                        console.error('ProjectModal rendering error:', error);
+                        console.error('TaskModal rendering error:', error);
                         return null;
                     }
                 })()}
 
-            {/* Note Modal - Always render it but control visibility with isOpen */}
-            {(() => {
-                try {
-                    return (
-                        <NoteModal
-                            isOpen={isNoteModalOpen}
-                            onClose={() => {
-                                setIsNoteModalOpen(false);
-                                setNoteToEdit(null);
-                            }}
-                            onSave={handleSaveNote}
-                            note={noteToEdit}
-                            projects={Array.isArray(projects) ? projects : []}
-                            onCreateProject={handleCreateProject}
-                        />
-                    );
-                } catch (error) {
-                    console.error('NoteModal rendering error:', error);
-                    return null;
-                }
-            })()}
+                {/* Project Modal - Only render when needed to prevent infinite loops */}
+                {isProjectModalOpen &&
+                    (() => {
+                        try {
+                            return (
+                                <ProjectModal
+                                    isOpen={isProjectModalOpen}
+                                    onClose={() => {
+                                        setIsProjectModalOpen(false);
+                                        setProjectToEdit(null);
+                                    }}
+                                    onSave={handleSaveProject}
+                                    project={projectToEdit || undefined}
+                                    areas={[]}
+                                />
+                            );
+                        } catch (error) {
+                            console.error('ProjectModal rendering error:', error);
+                            return null;
+                        }
+                    })()}
 
-            {/* Edit Inbox Item Modal */}
-            {isEditModalOpen && itemToEdit !== null && (
-                <InboxModal
-                    isOpen={isEditModalOpen}
-                    onClose={() => {
-                        setIsEditModalOpen(false);
-                        setItemToEdit(null);
-                    }}
-                    onSave={async () => {}} // Not used in edit mode
-                    initialText={
-                        inboxItems.find((item) => item.id === itemToEdit)
-                            ?.content || ''
+                {/* Note Modal - Always render it but control visibility with isOpen */}
+                {(() => {
+                    try {
+                        return (
+                            <NoteModal
+                                isOpen={isNoteModalOpen}
+                                onClose={() => {
+                                    setIsNoteModalOpen(false);
+                                    setNoteToEdit(null);
+                                }}
+                                onSave={handleSaveNote}
+                                note={noteToEdit}
+                                projects={Array.isArray(projects) ? projects : []}
+                                onCreateProject={handleCreateProject}
+                            />
+                        );
+                    } catch (error) {
+                        console.error('NoteModal rendering error:', error);
+                        return null;
                     }
-                    editMode={true}
-                    onEdit={handleSaveEditedItem}
-                />
-            )}
+                })()}
+
+                {/* Edit Inbox Item Modal */}
+                {isEditModalOpen && itemToEdit !== null && (
+                    <InboxModal
+                        isOpen={isEditModalOpen}
+                        onClose={() => {
+                            setIsEditModalOpen(false);
+                            setItemToEdit(null);
+                        }}
+                        onSave={async () => {}} // Not used in edit mode
+                        initialText={
+                            inboxItems.find((item) => item.id === itemToEdit)
+                                ?.content || ''
+                        }
+                        editMode={true}
+                        onEdit={handleSaveEditedItem}
+                    />
+                )}
+            </div>
         </div>
     );
 };
diff --git a/frontend/components/Notes.tsx b/frontend/components/Notes.tsx
index 814d294..bebd98f 100644
--- a/frontend/components/Notes.tsx
+++ b/frontend/components/Notes.tsx
@@ -181,13 +181,11 @@ const Notes: React.FC = () => {
         <div className="flex justify-center px-4 lg:px-2">
             <div className="w-full max-w-5xl">
                 {/* Notes Header */}
-                <div className="flex items-center justify-between mb-8">
-                    <div className="flex items-center">
-                        <BookOpenIcon className="h-6 w-6 mr-2 text-gray-900 dark:text-white" />
-                        <h2 className="text-2xl font-light text-gray-900 dark:text-white">
-                            {t('notes.title')}
-                        </h2>
-                    </div>
+                <div className="flex items-center mb-8">
+                    <BookOpenIcon className="h-6 w-6 mr-2" />
+                    <h2 className="text-2xl font-light">
+                        {t('notes.title')}
+                    </h2>
                 </div>
 
                 {/* Search Bar with Icon */}
diff --git a/frontend/components/Projects.tsx b/frontend/components/Projects.tsx
index 30ae49f..21f082d 100644
--- a/frontend/components/Projects.tsx
+++ b/frontend/components/Projects.tsx
@@ -232,10 +232,10 @@ const Projects: React.FC = () => {
 
     return (
         <div className="flex justify-center px-4 lg:px-2">
-            <div className="w-full max-w-6xl">
+            <div className="w-full max-w-5xl">
                 <div className="flex items-center mb-8">
-                    <FolderIcon className="h-6 w-6 text-gray-500 mr-2" />
-                    <h2 className="text-2xl font-light text-gray-900 dark:text-gray-100">
+                    <FolderIcon className="h-6 w-6 mr-2" />
+                    <h2 className="text-2xl font-light">
                         {t('projects.title')}
                     </h2>
                 </div>
diff --git a/frontend/components/Tags.tsx b/frontend/components/Tags.tsx
index 4c6bdd4..303c870 100644
--- a/frontend/components/Tags.tsx
+++ b/frontend/components/Tags.tsx
@@ -216,13 +216,11 @@ const Tags: React.FC = () => {
         <div className="flex justify-center px-4 lg:px-2">
             <div className="w-full max-w-5xl">
                 {/* Tags Header */}
-                <div className="flex items-center justify-between mb-8">
-                    <div className="flex items-center">
-                        <TagIcon className="h-6 w-6 mr-2 text-gray-900 dark:text-white" />
-                        <h2 className="text-2xl font-light text-gray-900 dark:text-white">
-                            Tags
-                        </h2>
-                    </div>
+                <div className="flex items-center mb-8">
+                    <TagIcon className="h-6 w-6 mr-2" />
+                    <h2 className="text-2xl font-light">
+                        Tags
+                    </h2>
                 </div>
 
                 {/* Search Bar with Icon */}
diff --git a/frontend/components/Tasks.tsx b/frontend/components/Tasks.tsx
index 027703a..fd010f3 100644
--- a/frontend/components/Tasks.tsx
+++ b/frontend/components/Tasks.tsx
@@ -270,7 +270,7 @@ const Tasks: React.FC = () => {
     return (
         <div className="flex justify-center px-4 lg:px-2">
             <div className="w-full max-w-5xl">
-                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4">
+                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-8">
                     <div className="flex items-center mb-2 sm:mb-0">
                         {IconComponent && (
                             <IconComponent className="h-6 w-6 mr-2" />