fix: move task panel to separate page

CHANGELOG.md

@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Dedicated Tasks page (`/tasks`) — task list, NewTaskForm, and End Day button moved out of the dashboard column into a standalone page; starting a day auto-navigates to `/tasks`; day summary displayed on the Tasks page after ending the day; dashboard shows a compact "Day In Progress" card with task count and a "View Tasks" link while a day is active
+  — `src/pages/TaskList.tsx` (new), `src/pages/Index.tsx`, `src/App.tsx`
+- Tasks navigation item added to desktop top nav and mobile bottom nav; mobile nav grid updated to support up to five items for authenticated users
+  — `src/components/Navigation.tsx`, `src/components/MobileNav.tsx`
+
 - Contributing guidelines section in README with commit prefix table and approval requirements
   — `README.md` (documents `major`/`feat`/`fix`/`patch`/`bump`/`maint`/`refactor`/`a11y`/`docs` prefixes and which trigger releases)
 - Persistent report summaries — generated summaries are auto-saved to localStorage

README-EXT.md

@@ -44,11 +44,11 @@ For the main overview, see [README.md](README.md).
 
 **Morning:**
 
-1. Click "Start Day" to begin tracking. The timer starts automatically.
+1. Click "Start Day" on the dashboard to begin tracking. The app navigates to the **Tasks** page automatically.
 
 **Throughout the Day:**
 
-1. Click "New Task" to create a task.
+1. Click "New Task" on the Tasks page to create a task.
 2. Fill in task details:
    - **Title** (required) — brief description of the work
    - **Description** (optional) — detailed notes with markdown support
@@ -59,7 +59,7 @@ For the main overview, see [README.md](README.md).
 
 **Evening:**
 
-1. Click "End Day" when finished.
+1. Click "End Day" on the Tasks page (or the Dashboard) when finished.
 2. Review your day summary (total time, revenue, task breakdown).
 3. Click "Post Time to Archive" to save permanently.
 
@@ -347,7 +347,8 @@ src/
 │   ├── supabase.ts           # Supabase client
 │   └── utils.ts              # Helper functions
 ├── pages/
-│   ├── Index.tsx             # Home / time tracker
+│   ├── Index.tsx             # Dashboard (start/end day, stats)
+│   ├── TaskList.tsx          # Active task list and NewTaskForm
 │   ├── Archive.tsx           # Archived days
 │   ├── ProjectList.tsx       # Project management
 │   ├── Categories.tsx        # Category management

src/App.tsx

@@ -21,6 +21,7 @@ const Settings = lazy(() => import("./pages/Settings"));
 const NotFound = lazy(() => import("./pages/NotFound"));
 const Categories = lazy(() => import("./pages/Categories"));
 const Report = lazy(() => import("./pages/Report"));
+const TaskList = lazy(() => import("./pages/TaskList"));
 
 // Loading fallback component
 const PageLoader = () => (
@@ -48,6 +49,7 @@ const App = () => (
             <Suspense fallback={<PageLoader />}>
               <Routes>
                 <Route path="/" element={<Index />} />
+                <Route path="/tasks" element={<TaskList />} />
                 <Route path="/projectlist" element={<ProjectList />} />
                 <Route path="/categories" element={<Categories />} />
                 <Route path="/archive" element={<Archive />} />

src/components/MobileNav.tsx

@@ -1,63 +1,75 @@
-import { memo } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { Home, Archive, Settings, PaperclipIcon } from 'lucide-react';
-import { useAuth } from '@/hooks/useAuth';
+import { memo } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { Home, Archive, Settings, PaperclipIcon, ClipboardList } from "lucide-react";
+import { useAuth } from "@/hooks/useAuth";
 
 export const MobileNav = memo(function MobileNav() {
-  const location = useLocation();
-  const { isAuthenticated } = useAuth();
+	const location = useLocation();
+	const { isAuthenticated } = useAuth();
 
-  const isActive = (path: string) => {
-    return location.pathname === path;
-  };
+	const isActive = (path: string) => {
+		return location.pathname === path;
+	};
 
-  const navItems = [
-    {
-      path: '/',
-      icon: Home,
-      label: 'Home'
-    },
-    ...(isAuthenticated ? [{
-      path: '/report',
-      icon: PaperclipIcon,
-      label: 'Report'
-    }] : []),
-    {
-      path: '/archive',
-      icon: Archive,
-      label: 'Archive'
-    },
-    {
-      path: '/settings',
-      icon: Settings,
-      label: 'Settings'
-    }
-  ];
+	const navItems = [
+		{
+			path: "/",
+			icon: Home,
+			label: "Home"
+		},
+		{
+			path: "/tasks",
+			icon: ClipboardList,
+			label: "Tasks"
+		},
+		...(isAuthenticated ? [{
+			path: "/report",
+			icon: PaperclipIcon,
+			label: "Report"
+		}] : []),
+		{
+			path: "/archive",
+			icon: Archive,
+			label: "Archive"
+		},
+		{
+			path: "/settings",
+			icon: Settings,
+			label: "Settings"
+		}
+	];
 
-  return (
-    <nav
-      className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-40 mobile-nav-ios print:hidden"
-      style={{
-        paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 0px)'
-      }}
-    >
-      <div className={`grid ${navItems.length === 3 ? 'grid-cols-3' : 'grid-cols-4'} h-16`}>
-        {navItems.map(({ path, icon: Icon, label }) => (
-          <Link
-            key={path}
-            to={path}
-            className={`flex flex-col items-center justify-center space-y-1 transition-colors touch-manipulation ${isActive(path)
-                ? 'text-primary'
-                : 'text-muted-foreground hover:text-foreground'
-              }`}
-            aria-label={label}
-            aria-current={isActive(path) ? 'page' : undefined}
-          >
-            <Icon className="h-5 w-5" />
-            <span className="text-xs font-medium">{label}</span>
-          </Link>
-        ))}
-      </div>
-    </nav>
-  );
+	const gridClass =
+		navItems.length <= 3
+			? "grid-cols-3"
+			: navItems.length === 4
+				? "grid-cols-4"
+				: "grid-cols-5";
+
+	return (
+		<nav
+			className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-40 mobile-nav-ios print:hidden"
+			style={{
+				paddingBottom: "max(env(safe-area-inset-bottom, 0px), 0px)"
+			}}
+		>
+			<div className={`grid ${gridClass} h-16`}>
+				{navItems.map(({ path, icon: Icon, label }) => (
+					<Link
+						key={path}
+						to={path}
+						className={`flex flex-col items-center justify-center space-y-1 transition-colors touch-manipulation ${isActive(path)
+								? "text-primary"
+								: "text-muted-foreground hover:text-foreground"
+							}`}
+						aria-label={label}
+						aria-current={isActive(path) ? "page" : undefined}
+					>
+						<Icon className="h-5 w-5" />
+						<span className="text-xs font-medium">{label}</span>
+					</Link>
+				))}
+			</div>
+		</nav>
+	);
 });

src/components/Navigation.tsx

@@ -12,7 +12,7 @@ import { ProjectManagement } from '@/components/ProjectManagement';
 import { UserMenu } from '@/components/UserMenu';
 import { AuthDialog } from '@/components/AuthDialog';
 import { Link } from 'react-router-dom';
-import { CogIcon, Printer, CalendarClock } from 'lucide-react';
+import { CogIcon, Printer, CalendarClock, ClipboardList } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { formatDuration } from '@/utils/timeUtil';
 import { SyncStatus } from '@/components/SyncStatus';
@@ -100,6 +100,15 @@ const SiteNavigationMenu = () => {
                 </Button>
               </Item>
             )}
+            <Item className="hidden md:flex">
+              <NavLink
+                to="/tasks"
+                className={({ isActive }) => getNavLinkClasses(isActive)}
+              >
+                <ClipboardList className="w-4 h-4" />
+                <span className="hidden lg:block">Tasks</span>
+              </NavLink>
+            </Item>
             <Item className="hidden md:flex">
               <NavLink
                 to="/settings"