CHROMADAY: A Calendar with Room for Detail

See the month, then work through the day

I designed and built CHROMADAY to combine a monthly calendar with a structured notebook for each date. I wanted to see an entire month at once, write directly into a day, and organize its smaller tasks without crowding the overview. The project’s October 7, 2026 release brings together nested notes, checklists, rich text, tables, and offline use.

The name combines chroma, referring to color, with day. Color became part of the document’s structure: each top-level entry receives a distinct tone, and its children inherit lighter shades. A short plan can grow into an outline while keeping a visible relationship between its parts.

Open CHROMADAY

Move between overview, inspection, and editing

CHROMADAY opens to the current month and marks today. Compact navigation provides previous and next periods, a Today button, and a date title that opens a picker. Month, week, and day views use the same notes. Changing the view changes the space available to read them.

Weeks begin on Monday, and the monthly grid uses the number of rows that the month requires. Adjacent-month dates complete the grid. Selecting a date reveals its outline; selecting it again collapses the details. Double-clicking, pressing Enter, or using the edit button opens the editor. On desktop, a side panel keeps the calendar visible while writing. Phones use the available width for editing and a bottom panel for selected-day details.

A daily note might contain homework with Math and English underneath it, lunch with Eggs, and a shopping reminder. The collapsed calendar shows three root items: Do homework, Lunch, and Buy food. A chevron and descendant count identify the particular entries with children. Selecting the date reveals the complete outline without changing the saved document.

Ben Shneiderman’s information-visualization research provided a useful reference for moving from an overview to details on demand. I applied that relationship through the calendar views and expandable notes. Dieter Rams’s design principles informed the limited controls, thin grid lines, and generous space for dates and writing.

Give a growing outline a consistent hierarchy

The editor starts in bullet-list mode. Its toolbar provides bold, italic, underline, strikethrough, highlighting, font sizes, text colors, indentation, checklists, tables, and undo and redo. Table cells are editable, columns can be resized, and row and column operations remain within the document. Converting an outline into a checklist preserves its text and nesting.

Up to three indentations produce four displayed levels:

Indentation, weight, and child indicators provide several ways to recognize structure.

The palette contains 96 stable tones. A new root receives a random tone different from the preceding root; descendants inherit the ancestor’s hue, with lighter shades and variation between siblings. These values are stored with the document. Reopening a note preserves its appearance rather than assigning new colors.

Making text lighter also requires a contrast constraint. The algorithm computes a lightness ceiling for each hue, targeting 4.6:1 against the relevant backgrounds, with WCAG’s contrast criterion as its readability baseline. This constraint applies to the automatic palette; users retain control over manually selected colors.

Keep documents structured and dates local

I built CHROMADAY with React, TypeScript, and Vite, using Tiptap and ProseMirror for editing. Each date stores a small record:

interface Note {
  date: string;
  content: JSONContent;
  updatedAt: string;
}

The document tree preserves paragraphs, lists, checklist states, formatting marks, and tables. List items carry identity, tone, depth, and sibling-shade metadata. A custom ProseMirror extension normalizes that metadata as lines split, items move, or bullets become tasks.

The calendar renders previews from the saved structure independently of the editor. It can show root items or the full outline while the editing interface loads lazily through React’s lazy and Suspense. Someone checking the month can begin reading before the editor is needed.

A calendar date also needs different handling from a timestamp. CHROMADAY builds date keys from local year, month, and day values, parses them at local noon, and navigates with calendar-day arithmetic. A note stays attached to its visible date across daylight-saving transitions, month boundaries, and leap years.

Make autosave respect concurrent work

Notes persist locally in IndexedDB through idb. The visible document updates immediately, while a serialized save queue groups pending changes by date. Rapid typing can replace an outdated pending document with the latest one. The interface reports a note as saved only after its transaction completes.

Each edit retains the exact persisted record from which it began. Before writing, the storage layer reads the current record and compares it with that baseline inside the same read/write transaction. This compare-and-set operation protects the starting point of the edit.

If two tabs open one date and the first saves, the second cannot overwrite it with a document based on the older record. Its write is rejected, and its local draft remains available. Comparing the complete baseline matters: a later timestamp can still belong to a stale edit.

BroadcastChannel announces committed changes, with a localStorage change token as a fallback. The signals contain no note content. Focus and visibility changes provide further opportunities to refresh other dates.

Failed writes retain pending documents and expose retry and backup actions. If the initial database read fails, editing waits for recovery, preventing an unread collection from being replaced by an empty starting state.

Build recovery into the same workflow

Export first attempts to flush pending writes, then reads the shared database and combines saved records with local drafts. A conflict backup can preserve both versions of the same date. If a later database read fails, the application can export the content already available in memory and identifies that recovery file as incomplete.

Import validates backup metadata, file size, dates, timestamps, document structure, and nesting before merging records in one transaction. A failed write rolls back the entire import. Newer timestamps take precedence during reconciliation, and cleared notes remain timestamped empty documents, preventing an older backup from bringing back content cleared more recently. Competing documents remain available in the original conflict backup; import selects the newer timestamp.

Notes belong to the current browser and website origin. JSON export and import provide a way to move them to another browser or device and keep a separate copy. The application uses local storage without an account or server database.

Keep writing available offline

Workbox and vite-plugin-pwa cache the application while IndexedDB stores its notes. After an online visit completes caching, both the calendar and the lazy editor can reopen offline, including an editor that was not opened during the first session.

I used Workbox’s clientsClaim so the initially open page can become controlled by the activated service worker without requiring another reload. Updates appear as a prompt and wait while editing, saving, or showing a save error. Pending writes are flushed before an update reload proceeds.

Test the transitions that affect trust

The October 7, 2026 release verification recorded 169 unit tests, 33 end-to-end tests in Chromium, and the same 33 tests in WebKit, along with the production build and online, offline, and responsive checks.

Storage coverage includes stale writes, simultaneous edits, transaction rollback, repeated imports, cleared-note preservation, clock changes, database upgrades, and read and write failures. Editor coverage includes nested outlines, formatting, checklists, tables, color persistence, CJK font weights, and backup round trips. Calendar coverage includes date boundaries, navigation, keyboard interactions, and view switching. Browser tests use real IndexedDB to exercise the save and recovery paths.

CHROMADAY brings interface design and persistence engineering into the same project. The month gives a plan its context, the outline gives it detail, and the document model keeps those views connected. Stable colors, local date handling, transaction checks, and recoverable drafts support the ordinary sequence the app is built for: write, collapse, return, and continue.

Open CHROMADAY