From aceca82e502f525aca108b855ceb2ac42413ea9c Mon Sep 17 00:00:00 2001
From: Chris <chrisvel@users.noreply.github.com>
Date: Wed, 3 Dec 2025 22:52:32 +0200
Subject: [PATCH] Feat add task (#644)

* Add icon

* fixup! Add icon
---
 frontend/components/Sidebar.tsx            |  1 +
 frontend/components/Sidebar/SidebarNav.tsx | 39 ++++++++++++++++++----
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/frontend/components/Sidebar.tsx b/frontend/components/Sidebar.tsx
index c59fd16..aa33b11 100644
--- a/frontend/components/Sidebar.tsx
+++ b/frontend/components/Sidebar.tsx
@@ -74,6 +74,7 @@ const Sidebar: React.FC<SidebarProps> = ({
                             handleNavClick={handleNavClick}
                             location={location}
                             isDarkMode={isDarkMode}
+                            openTaskModal={openTaskModal}
                         />
                         <SidebarProjects
                             handleNavClick={handleNavClick}
diff --git a/frontend/components/Sidebar/SidebarNav.tsx b/frontend/components/Sidebar/SidebarNav.tsx
index 74f7508..44efa7b 100644
--- a/frontend/components/Sidebar/SidebarNav.tsx
+++ b/frontend/components/Sidebar/SidebarNav.tsx
@@ -7,6 +7,7 @@ import {
     ListBulletIcon,
     ClockIcon,
 } from '@heroicons/react/24/solid';
+import { PlusCircleIcon } from '@heroicons/react/24/outline';
 import { useStore } from '../../store/useStore';
 import { loadInboxItemsToStore } from '../../utils/inboxService';
 
@@ -14,11 +15,13 @@ interface SidebarNavProps {
     handleNavClick: (path: string, title: string, icon: JSX.Element) => void;
     location: Location;
     isDarkMode: boolean;
+    openTaskModal: (type?: 'simplified' | 'full') => void;
 }
 
 const SidebarNav: React.FC<SidebarNavProps> = ({
     handleNavClick,
     location,
+    openTaskModal,
 }) => {
     const { t } = useTranslation();
     const store = useStore();
@@ -101,13 +104,35 @@ const SidebarNav: React.FC<SidebarNavProps> = ({
                                 {link.icon}
                                 <span className="ml-2">{link.title}</span>
                             </div>
-                            {link.path === '/inbox' && inboxItemsCount > 0 && (
-                                <span className="text-sm font-bold text-blue-500 dark:text-blue-400">
-                                    {inboxItemsCount > 99
-                                        ? '99+'
-                                        : inboxItemsCount}
-                                </span>
-                            )}
+                            <div className="flex items-center gap-2">
+                                {link.path === '/inbox' &&
+                                    inboxItemsCount > 0 && (
+                                        <span className="text-sm font-bold text-blue-500 dark:text-blue-400">
+                                            {inboxItemsCount > 99
+                                                ? '99+'
+                                                : inboxItemsCount}
+                                        </span>
+                                    )}
+                                {link.path === '/tasks?status=active' && (
+                                    <button
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            openTaskModal('full');
+                                        }}
+                                        className="text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white focus:outline-none"
+                                        aria-label={t(
+                                            'sidebar.addTaskAriaLabel',
+                                            'Add Task'
+                                        )}
+                                        title={t(
+                                            'sidebar.addTaskTitle',
+                                            'Add Task'
+                                        )}
+                                    >
+                                        <PlusCircleIcon className="h-5 w-5" />
+                                    </button>
+                                )}
+                            </div>
                         </button>
                     </li>
                 </React.Fragment>