Made it only 5 days and scroll by 1 day

src/main/components/App.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTableContext } from "../views/TableView";
 import Table from "./Table";
 import TopBar from "./TopBar";
-import { format, addDays, startOfWeek, subDays, getDay } from "date-fns";
+import { format, addDays, subDays } from "date-fns";
 
 export interface Project {
 	id: number;
@@ -24,11 +24,8 @@ export interface TaskStatus {
 	color: string;
 }
 
-const getWeekDates = (date: Date) => {
-	const dayOfWeek = getDay(date); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
-	const adjustedDate = dayOfWeek === 0 ? addDays(date, 1) : date;
-	const startDate = startOfWeek(adjustedDate, { weekStartsOn: 1 });
-	const dates = Array.from({ length: 7 }, (_, i) => {
+const getWeekDates = (startDate: Date) => {
+	const dates = Array.from({ length: 5 }, (_, i) => {
 		return format(addDays(startDate, i), "yyyy-MM-dd");
 	});
 	return dates;
@@ -63,14 +60,14 @@ const App: React.FC = () => {
 
 	const incrementDates = () => {
 		setDates((prevDates) => {
-			const newDates = getWeekDates(addDays(new Date(prevDates[0]), 8));
+			const newDates = getWeekDates(addDays(new Date(prevDates[0]), 2));
 			return newDates;
 		});
 	};
 
 	const decrementDates = () => {
 		setDates((prevDates) => {
-			const newDates = getWeekDates(subDays(new Date(prevDates[0]), 6));
+			const newDates = getWeekDates(subDays(new Date(prevDates[0]), 0));
 			return newDates;
 		});
 	};

src/main/components/Table.tsx

@@ -1,4 +1,4 @@
-import { format } from "date-fns";
+import { format, parseISO } from "date-fns";
 import { useEffect, useRef } from "react";
 import * as React from "react";
 import { Project, TaskStatus } from "./App";
@@ -34,7 +34,7 @@ const Table: React.FC<TableProps> = ({
 	nextTaskId,
 	handleTaskNameChange,
 	taskStatuses,
-	editTaskStatus
+	editTaskStatus,
 }) => {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const newProjectInputRef = useRef<HTMLInputElement | null>(null);
@@ -46,7 +46,7 @@ const Table: React.FC<TableProps> = ({
 			if (containerWidth) {
 				document.documentElement.style.setProperty(
 					"--taskcell-enclosure-width",
-					`${(containerWidth - 128) / 7}px`
+					`${(containerWidth - 128) / 5}px`
 				);
 			}
 		};
@@ -73,14 +73,19 @@ const Table: React.FC<TableProps> = ({
 					<thead className="table-header">
 						<tr>
 							<th>Projects</th>
-							{dates.map((date) => (
-								<th className="date" key={date}>
-									<div className="date-header">
-										<div>{format(date, "EEEE")}</div>
-										<div>{format(date, "yyyy-MM-dd")}</div>
-									</div>
-								</th>
-							))}
+							{dates.map((date) => {
+								const dateObj = parseISO(date);
+								return (
+									<th className="date" key={date}>
+										<div className="date-header">
+											<div>{format(dateObj, "EEEE")}</div>
+											<div>
+												{format(dateObj, "yyyy-MM-dd")}
+											</div>
+										</div>
+									</th>
+								);
+							})}
 						</tr>
 					</thead>
 					<tbody>
@@ -97,7 +102,10 @@ const Table: React.FC<TableProps> = ({
 										value={project.name}
 										className="project-input"
 										placeholder="New project"
-										onBlur={(e) => { if (e.target.value === "") removeProject(project.id) }}
+										onBlur={(e) => {
+											if (e.target.value === "")
+												removeProject(project.id);
+										}}
 										onChange={(e) =>
 											handleProjectNameChange(
 												project.id,
@@ -114,7 +122,9 @@ const Table: React.FC<TableProps> = ({
 											if (e.target === e.currentTarget) {
 												addTaskToProject(project, date);
 												setTimeout(() => {
-													if (newTaskInputRef.current) {
+													if (
+														newTaskInputRef.current
+													) {
 														newTaskInputRef.current.focus();
 													}
 												}, 0);
@@ -136,14 +146,19 @@ const Table: React.FC<TableProps> = ({
 													removeTask={removeTask}
 													key={task.id}
 													inputRef={
-														task.id === nextTaskId - 1
+														task.id ===
+														nextTaskId - 1
 															? newTaskInputRef
 															: null
 													}
-													handleTaskNameChange={handleTaskNameChange}
+													handleTaskNameChange={
+														handleTaskNameChange
+													}
 													status={task.status}
 													taskStatuses={taskStatuses}
-													editTaskStatus={editTaskStatus}
+													editTaskStatus={
+														editTaskStatus
+													}
 												/>
 											))}
 									</td>