Skip to content

feat: Remove leftover day navigation from header #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Joe-Ortiz merged 1 commit into from
Jul 11, 2026
Merged

feat: Remove leftover day navigation from header #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 0 additions & 81 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,82 +64,6 @@ html, body {
font-weight: 700;
}

/* Date Navigator */
.date-navigator {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
gap: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.date-nav-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 1.6rem;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.1s;
line-height: 1;
padding: 0;
flex-shrink: 0;
}

.date-nav-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.35);
transform: scale(1.08);
}

.date-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
transform: none;
}

.date-display {
display: flex;
align-items: center;
gap: 0.75rem;
color: white;
font-weight: 600;
font-size: 1rem;
min-width: 240px;
justify-content: center;
text-align: center;
}

#selectedDateDisplay {
white-space: nowrap;
}

.today-btn {
background: white;
color: var(--primary-color);
border: none;
border-radius: 1rem;
padding: 0.2rem 0.8rem;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
white-space: nowrap;
flex-shrink: 0;
}

.today-btn:hover {
opacity: 0.85;
transform: scale(1.04);
}

/* Hamburger Menu */
.hamburger-menu {
display: none;
Expand Down Expand Up @@ -1366,11 +1290,6 @@ html, body {
.task-meta {
flex-direction: column;
}

.date-display {
min-width: 180px;
font-size: 0.875rem;
}
}

@media (max-width: 480px) {
Expand Down
35 changes: 0 additions & 35 deletions e2e/app.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,41 +189,6 @@ test.describe('Task Manager App', () => {
});
});

// ========================
// Date Navigation
// ========================
test.describe('date navigation', () => {
test('should show today by default', async ({ page }) => {
await expect(page.locator('#selectedDateDisplay')).toContainText('Today');
});

test('should navigate to previous day', async ({ page }) => {
await page.click('#prevDayBtn');
await expect(page.locator('#selectedDateDisplay')).not.toContainText('Today');
await expect(page.locator('#goTodayBtn')).toBeVisible();
});

test('should return to today via button', async ({ page }) => {
await page.click('#prevDayBtn');
await page.click('#goTodayBtn');
await expect(page.locator('#selectedDateDisplay')).toContainText('Today');
});

test('should reload active tab data when returning to today', async ({ page }) => {
// Switch to tasks tab
await page.click('[data-tab="tasks"]');
await expect(page.locator('#tasks-tab')).toBeVisible();
// Navigate to previous day
await page.click('#prevDayBtn');
await expect(page.locator('#selectedDateDisplay')).not.toContainText('Today');
// Return to today via button
await page.click('#goTodayBtn');
// The tasks tab should still be active and showing today's data
await expect(page.locator('#selectedDateDisplay')).toContainText('Today');
await expect(page.locator('#tasks-tab')).toBeVisible();
});
});

// ========================
// Dashboard Overdue Tasks
// ========================
Expand Down
10 changes: 0 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,6 @@ <h1>📋 Task Manager</h1>
</div>
</header>

<!-- Date Navigator -->
<div class="date-navigator">
<button class="date-nav-btn" id="prevDayBtn" aria-label="Previous day">&#8249;</button>
<div class="date-display">
<span id="selectedDateDisplay">Today</span>
<button class="today-btn" id="goTodayBtn" style="display:none;">Back to Today</button>
</div>
<button class="date-nav-btn" id="nextDayBtn" aria-label="Next day">&#8250;</button>
</div>

<!-- Navigation Tabs -->
<button class="hamburger-menu" id="hamburgerMenu" aria-label="Toggle navigation">
<span></span>
Expand Down
82 changes: 3 additions & 79 deletions src/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ class TaskManager {
currentEditingShoppingItemId: string | null = null;
dragSrcWishId: string | null = null;
expandedWishLists: Set<string> = new Set();
selectedDate: Date = new Date();
tasksExpanded: boolean = false;
hideCompleted: boolean = false;

Expand All @@ -39,7 +38,6 @@ class TaskManager {
init(): void {
this.setupEventListeners();
this.initializeFinanceDateFilter();
this.updateDateNavigator();
this.loadFilterSettings();
this.render();
this.processRecurringTasks();
Expand Down Expand Up @@ -184,19 +182,6 @@ class TaskManager {
this.switchTab('tasks');
});

// Date navigator
document.getElementById('prevDayBtn')!.addEventListener('click', () => this.navigateDate(-1));
document.getElementById('nextDayBtn')!.addEventListener('click', () => this.navigateDate(1));
document.getElementById('goTodayBtn')!.addEventListener('click', () => {
this.selectedDate = new Date();
this.updateDateNavigator();
const activeTabName = (document.querySelector('.nav-tab.active') as HTMLElement | null)?.dataset.tab;
if (activeTabName) {
this.switchTab(activeTabName);
} else {
this.renderDashboard();
}
});
}

// ========================
Expand Down Expand Up @@ -254,7 +239,7 @@ class TaskManager {
// Dashboard Rendering
// ========================
renderDashboard(): void {
const today = this.getSelectedDateStr();
const today = storage.formatDate(new Date());
const tasks = storage.getTasks();

// Selected day's overview
Expand Down Expand Up @@ -392,7 +377,7 @@ class TaskManager {
const tasks = storage.getTasks();
const statusFilter = (document.getElementById('statusFilter') as HTMLSelectElement).value;
const searchTerm = (document.getElementById('searchTasks') as HTMLInputElement).value.toLowerCase();
const today = this.getSelectedDateStr();
const today = storage.formatDate(new Date());
const filtersActive = statusFilter || searchTerm;

let filtered = tasks.filter(task => {
Expand Down Expand Up @@ -677,7 +662,7 @@ class TaskManager {
if (task) {
task.completed = !task.completed;
if (task.completed) {
task.completedDate = this.getSelectedDateStr();
task.completedDate = storage.formatDate(new Date());
// If repeatable, immediately create next task with recalculated due date
if (task.repeatType !== 'none') {
this.createNextRecurringTask(task);
Expand Down Expand Up @@ -2193,70 +2178,9 @@ class TaskManager {
const lastUpdated = storage.getData().lastUpdated;
document.getElementById('lastUpdated')!.textContent = lastUpdated ? new Date(lastUpdated).toLocaleString() : 'Never';

this.updateDateNavigator();
this.renderDashboard();
}

// ========================
// Date Navigation
// ========================
getSelectedDateStr(): string {
return storage.formatDate(this.selectedDate);
}

isSelectedDateToday(): boolean {
return this.getSelectedDateStr() === storage.formatDate(new Date());
}

navigateDate(delta: number): void {
const today = new Date();
today.setHours(0, 0, 0, 0);
const minDate = new Date(today);
minDate.setDate(minDate.getDate() - 6);

const newDate = new Date(this.selectedDate);
newDate.setDate(newDate.getDate() + delta);
newDate.setHours(0, 0, 0, 0);

if (newDate >= minDate && newDate <= today) {
this.selectedDate = newDate;
this.updateDateNavigator();
const activeTab = document.querySelector('.nav-tab.active') as HTMLElement | null;
if (activeTab) {
this.switchTab(activeTab.dataset.tab!);
} else {
this.renderDashboard();
}
}
}

formatDisplayDate(date: Date): string {
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return `${days[date.getDay()]}, ${months[date.getMonth()]} ${date.getDate()}`;
}

updateDateNavigator(): void {
const today = new Date();
today.setHours(0, 0, 0, 0);
const minDate = new Date(today);
minDate.setDate(minDate.getDate() - 6);

const sel = new Date(this.selectedDate);
sel.setHours(0, 0, 0, 0);

const isToday = sel.getTime() === today.getTime();
const isPastLimit = sel.getTime() <= minDate.getTime();

const displayStr = isToday
? `Today — ${this.formatDisplayDate(this.selectedDate)}`
: this.formatDisplayDate(this.selectedDate);

document.getElementById('selectedDateDisplay')!.textContent = displayStr;
(document.getElementById('prevDayBtn') as HTMLButtonElement).disabled = isPastLimit;
(document.getElementById('nextDayBtn') as HTMLButtonElement).disabled = isToday;
(document.getElementById('goTodayBtn') as HTMLElement).style.display = isToday ? 'none' : 'inline-block';
}
}

// Initialize the app when DOM is ready
Expand Down
Loading