diff --git a/README.md b/README.md index 70a9f3a..229a950 100644 --- a/README.md +++ b/README.md @@ -98,10 +98,10 @@ The date, storage, rollover, task and undo logic lives in `src/lib/` as plain mo - **Clear input**: Press Escape while the input is focused ### Date Management -- **Switch between Today and Tomorrow**: Click the date button in the header +- **Switch between Today and Tomorrow**: Pick either one in the header. The current day is the highlighted one - **Plan ahead**: Add tasks to Tomorrow's list before you need them - **Separate lists**: Today and Tomorrow maintain independent task lists -- **Carry-over**: When a new day begins, whatever you didn't finish moves into Today. Completed tasks are cleared away with the day they belonged to. It works across gaps too. If you don't open Negotium for a week, everything still outstanding is waiting for you. +- **Carry-over**: When a new day begins, whatever you didn't finish moves into Today, and the app tells you how many tasks it brought forward so they don't look like they appeared from nowhere. Completed tasks are cleared away with the day they belonged to. It works across gaps too. If you don't open Negotium for a week, everything still outstanding is waiting for you. - **While it's open**: The app notices the day change on its own, so a tab left open overnight rolls over without a reload. ### Installing It diff --git a/src/App.svelte b/src/App.svelte index ebca6dc..0f0a80f 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -5,7 +5,7 @@ import { cubicOut } from 'svelte/easing'; import './style.css'; - import { toKey, addDays, fromKey, labelFor, formatLong } from './lib/dates.js'; + import { toKey, addDays, fromKey, formatLong } from './lib/dates.js'; import { createStorage } from './lib/storage.js'; import { rollover, msUntilNextMidnight } from './lib/rollover.js'; import * as taskOps from './lib/tasks.js'; @@ -24,7 +24,19 @@ storage.migrateLegacyKeys(); const bootNow = new Date(); + const bootTodayKey = toKey(bootNow); + const beforeRollover = storage.loadTasks(bootTodayKey).length; + let tasks = $state(rollover(storage, bootNow)); + + /** How many unfinished tasks were pulled forward from earlier days on this + * load. The app's cleverest behaviour used to happen in complete silence, + * so returning after a weekend looked like a bug rather than a feature. */ + let carriedOver = $state(Math.max(0, tasks.length - beforeRollover)); + + function dismissCarriedOver() { + carriedOver = 0; + } let newTask = $state(''); // Seeded from the class the pre-paint script in index.html already set, so // there is one source of truth and no post-mount correction to flash. @@ -474,9 +486,11 @@ return toKey(addDays(fromKey(todayKey), 1)); } - function switchDate() { + function showDay(key) { + if (key === selectedKey) return; cancelEdit(); - selectedKey = selectedKey === todayKey ? tomorrowKey() : todayKey; + dismissUndo(); + selectedKey = key; tasks = storage.loadTasks(selectedKey); } @@ -494,7 +508,10 @@ const wasViewingToday = selectedKey === todayKey; todayKey = toKey(now); + const before = storage.loadTasks(todayKey).length; const todayTasks = rollover(storage, now); + const moved = todayTasks.length - before; + if (moved > 0) carriedOver = moved; if (wasViewingToday) { selectedKey = todayKey; @@ -521,7 +538,6 @@ } const currentDateDisplay = $derived(formatLong(selectedKey)); - const buttonText = $derived(labelFor(selectedKey, todayKey)); const remainingTasks = $derived(tasks.filter(task => !task.completed).length); const completedTasks = $derived(tasks.filter(task => task.completed).length); @@ -571,15 +587,26 @@
- + +
+ + +
+
+ {/if} +
{#key selectedKey} {#if tasks.length === 0} diff --git a/src/lib/dates.js b/src/lib/dates.js index ecb561f..679c7dc 100644 --- a/src/lib/dates.js +++ b/src/lib/dates.js @@ -28,12 +28,6 @@ export function isKey(value) { return KEY_PATTERN.test(value) } -export function labelFor(dateKey, todayKey) { - if (dateKey === todayKey) return 'Today' - if (dateKey === toKey(addDays(fromKey(todayKey), 1))) return 'Tomorrow' - return fromKey(dateKey).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) -} - export function formatLong(dateKey) { return fromKey(dateKey).toLocaleDateString('en-US', { weekday: 'long', diff --git a/src/lib/dates.test.js b/src/lib/dates.test.js index 47ee4b7..2e2d8a2 100644 --- a/src/lib/dates.test.js +++ b/src/lib/dates.test.js @@ -1,5 +1,5 @@ import { describe, it, expect } from 'vitest' -import { toKey, fromKey, addDays, isKey, labelFor, formatLong } from './dates.js' +import { toKey, fromKey, addDays, isKey, formatLong } from './dates.js' describe('toKey', () => { it('formats a date as local YYYY-MM-DD', () => { @@ -60,28 +60,6 @@ describe('isKey', () => { }) }) -describe('labelFor', () => { - it('labels today', () => { - expect(labelFor('2026-08-15', '2026-08-15')).toBe('Today') - }) - - it('labels tomorrow', () => { - expect(labelFor('2026-08-16', '2026-08-15')).toBe('Tomorrow') - }) - - it('labels tomorrow across a month boundary', () => { - expect(labelFor('2026-09-01', '2026-08-31')).toBe('Tomorrow') - }) - - it('labels tomorrow across a year boundary', () => { - expect(labelFor('2027-01-01', '2026-12-31')).toBe('Tomorrow') - }) - - it('falls back to a short date for other days', () => { - expect(labelFor('2026-08-20', '2026-08-15')).toBe('Aug 20') - }) -}) - describe('formatLong', () => { it('renders the long-form date used in the header', () => { expect(formatLong('2026-08-15')).toBe('Saturday, August 15, 2026') diff --git a/src/style.css b/src/style.css index 302b5f2..596fbec 100644 --- a/src/style.css +++ b/src/style.css @@ -92,30 +92,45 @@ body { gap: 16px; } -.today-btn { +/* Both days are shown with the current one marked, so the control states + where you are and what the alternative is without being clicked. */ +.day-switch { display: flex; align-items: center; - gap: 8px; - padding: 8px 16px; - background: transparent; border: 1px solid var(--border); border-radius: 8px; - color: var(--text-secondary); - font-size: 14px; - cursor: pointer; - transition: all 200ms ease; + padding: 3px; + gap: 2px; height: 40px; + transition: border-color 200ms ease; } -.today-btn:hover { +.day-option { + padding: 0 14px; + height: 100%; + border: none; + border-radius: 6px; + background: transparent; + font-family: inherit; + font-size: 14px; + color: var(--text-secondary); + cursor: pointer; + transition: background-color 200ms ease, color 200ms ease; + white-space: nowrap; +} + +.day-option:hover { + color: var(--text-primary); +} + +.day-option.selected { background-color: var(--hover); - border-color: var(--accent); - color: var(--accent); + color: var(--text-primary); + font-weight: 500; } -.today-btn svg { - width: 16px; - height: 16px; +html.dark .day-option.selected { + background-color: var(--hover); } .theme-toggle { @@ -604,7 +619,7 @@ html.dark .data-status.error { transform: translate(-50%, -50%); } - .today-btn, + .day-switch, .theme-toggle { height: 44px; } @@ -778,3 +793,55 @@ html.dark .undo-toast { min-height: 44px; } } + +/* Says out loud what rollover just did. Without it, opening the app after a + few days away looks like tasks appearing from nowhere. */ +.carried-notice { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 20px; + padding: 10px 10px 10px 14px; + border-radius: 8px; + background-color: var(--completed-bg); + color: var(--completed-text); + font-size: 14px; +} + +.carried-notice span { + flex: 1; + min-width: 0; +} + +.carried-dismiss { + flex-shrink: 0; + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border: none; + border-radius: 6px; + background: transparent; + color: inherit; + cursor: pointer; + opacity: 0.7; + transition: opacity 200ms ease, background-color 200ms ease; +} + +.carried-dismiss:hover { + opacity: 1; + background-color: var(--hover); +} + +.carried-dismiss svg { + width: 16px; + height: 16px; +} + +@media (pointer: coarse) { + .carried-dismiss { + width: 44px; + height: 44px; + } +}