---
banner: pixel-banner-images/wp4254880-dark-4k-wallpapers.jpg
banner-height: 460
pixel-banner-flag-color: white
---
# Journal App — Dev Log

> Single-file offline journal with timeline UI, calendar navigation, and markdown export.  
> Stack: Pure HTML/CSS/JS · IndexedDB · No dependencies  
> File: `C:\Users\jbrock\Documents\pisyncfolder\Journal App\journal.html`

---

## Status

| Field | Value |
|-------|-------|
| Version | v1.10 |
| Status | Active Development |
| Started | April 7, 2026 |
| Last Updated | April 27, 2026 (v1.10) |

---

## Changelog

### v1.10 — April 27, 2026
- **Project card timeline connector** — CSS-only horizontal connector line extending from each breakout card's left edge back to the main timeline vertical line; implemented via `.breakout-card::before` (205px accent-colored line at 50% card height, opacity 0.5) and `.breakout-card::after` (12px dot centered on the timeline line at `left: -211px`); `position: relative` added to `.breakout-card`; no layout constraints broken
- **Breakout card inline rename** — `edit` button added to breakout card action row (between `open →` and `✕`); clicking it swaps the project name display to a `.breakout-name-input` field and replaces action buttons with `save`/`cancel`; save writes both the `projectName` field on the breakout entry (`updateEntry`) and the canonical name in the projects store (`updateProject`), then refreshes the project cache and re-renders; `Enter` submits, `Escape` cancels; `updateProject(id, fields)` added as a new DB helper on `PROJECTS_STORE`

### v1.9 — April 21, 2026
- **CSS custom properties** — all 8 theme colors now defined as CSS variables in `:root` (`--bg-primary`, `--bg-secondary`, `--bg-accent`, `--accent`, `--accent-hover`, `--text-primary`, `--text-secondary`, `--text-muted`, `--disabled`); all hardcoded hex values replaced throughout `<style>` block; prerequisite for future dark/light theme toggle
- **Toast notifications** — slide-up toast (bottom-right, 3.5s auto-dismiss, accent border glow) appears on entry save, entry delete, and project note save; error toast shown if a DB call fails
- **Keyboard shortcut `N`** — press `N` from anywhere (when not in a text field) to jump focus to the main entry textarea; `Escape` closes the side panel or blurs the active input
- **Scanline overlay** — subtle CRT scanline texture via `body::before` repeating gradient; matches terminal aesthetic
- **Bug fix: `getKnownProjects()` crash** — function called `.trim()` on `projectId` for all entries including breakout markers, which store `projectId` as a number; fixed by filtering to `type !== 'breakout'` and `typeof projectId === 'string'` before mapping
- **Bug fix: `activateGroupFilter()` crash** — same root cause; added `type !== 'breakout'` guard to prevent `.trim()` TypeError on numeric project IDs
- **Error handling in panel submit** — added try/catch to `panelSubmit`; previously failed silently on any DB error; now shows error toast and logs to console
- **Borrowed from TaskOpi** (`C:\Users\jbrock\Documents\pisyncfolder\taskopi`) — toast pattern, keyboard shortcut pattern, CSS variable architecture, scanline overlay technique

### v1.8 — April 21, 2026
- Added **Project Breakout Panels** — side panel system for project-scoped note-taking alongside the main journal timeline
- Bumped IndexedDB to **version 2**; added two new object stores: `projects` (id, name, created) and `project_entries` (id, projectId, text, date, timestamp, mood, tags) with a `projectId` index on `project_entries`
- Added **breakout marker** entry type in the existing `entries` store (`type: 'breakout'`); inserted into the main timeline at the selected date to show where a context switch occurred
- **Breakout card** renders in the timeline in place of a regular entry — shows project name, live entry count, `open →` button, and a `✕` delete button; card is indented to match timeline flow but uses a card style (no dot/line)
- **`+ Project` button** added to the input row (left of word count); opens an inline prompt with datalist autocomplete from existing projects; confirm creates/reuses the project and inserts the breakout marker
- **Side panel** slides in from the right when `open →` is clicked; main timeline stays visible alongside it (`flex-direction: row` layout); panel shows project entries grouped by date, newest first
- Panel has its own textarea + Add Entry button; Ctrl+Enter also submits; entries are saved to `project_entries` (completely separate from the main journal stream)
- `closeProjectPanel()` hides the panel and restores single-column layout
- **Safety guards added**: `exportMarkdown` filters out breakout markers (no `text` field); `activateGroupFilter` skips breakout markers to avoid `.trim()` TypeError on numeric `projectId`
- New DB helpers: `createProject`, `getAllProjects`, `saveProjectEntry`, `getProjectEntries`, `getProjectEntryCount`, `insertBreakoutMarker`, `deleteBreakoutMarker`

### v1.7 — April 13, 2026
- Added **project ID field** on each entry — optional text input in the new-entry form; saves as `projectId` on the IndexedDB entry object
- Added **project badge** (`.entry-site-badge`) on every entry card — displays project name in accent red with a left-border pill style; falls back to `"GENERAL"` when no project is set
- Added **smart autocomplete** for the project field — `getKnownProjects()` reads all unique `projectId` values from IndexedDB and populates a native `<datalist>`; suggestions refresh after every save and on page load
- **Timeline stays strictly chronological** — all entries sort by timestamp descending regardless of project assignment; project context shown inline via badge rather than separate sections
- **Chronological group ordering** — when multiple projects are active in a day, sections sort by the most-recent entry timestamp in each group (not alphabetically), preserving the expected reading order
- Added CSS for collapsible project-section headers (`.project-group`, `.project-group-header`, `.project-group-entries`, `.project-group-chevron`) — available for future use if grouped view is desired

### v1.6 — April 8, 2026
- Added **word count display** in the input actions row (between selected date and Add Entry button)
- Live counter updates on every keystroke; resets to "0 words" after saving
- Singular "1 word" / plural "N words" formatting
- Styled with `text-secondary` color (#888888) at 0.75rem

### v1.5 — April 8, 2026
- Added **Jump to Today** button in month nav row (right of `>` arrow)
- Resets `currentYear`, `currentMonth`, and `selectedDate` to today; re-renders calendar, timeline, and date display
- Subtle ghost style (muted border + text); accent hover on approach

### v1.4 — April 8, 2026
- Added **entry count badge** on calendar days with entries
- `getDaysWithEntries()` now returns `Map<day, count>` instead of `Set<day>`
- Calendar cells with entries render two-line layout: day number + small count below
- Badge is bold, slightly transparent white, 0.6rem — stays within the 36px circle
- Days without entries unchanged

### v1.3 — April 8, 2026
- Added **mood/energy tag** selector in input area (😊 😐 😤 😴) — optional per entry
- Mood stored as `mood` field on each IndexedDB entry
- Selected mood highlights with accent border; click again to deselect (toggle)
- Mood clears automatically after each save
- Mood emoji shown in entry footer alongside the date
- Stats bar shows live mood tally for today (e.g. `😊×2  😴`) — hidden if no moods logged today
- Markdown export includes mood emoji inline with timestamp
- `saveEntry()` updated with optional `mood = null` parameter

### v1.2 — April 8, 2026
- Added **delete entry** — button appears on hover at end of entry footer; requires confirm before removal
- Added **edit entry text** — click "edit" to replace entry text with an inline textarea; Enter saves, Escape cancels, blur saves
- Added **time updater** — click any timestamp to open a native time input inline; Enter/blur saves, Escape cancels
- Added `deleteEntry(id)` and `updateEntry(id, fields)` IndexedDB helpers
- Entry HTML now includes `data-id` and `data-date` attributes for DOM-driven edits
- Entry footer restructured: date (left) + action buttons (right, fade in on hover)

### v1.1 — April 8, 2026
- Added stats bar between header and main
- Stats: entries today · current streak · peak hour · 30-day activity heatmap
- Heatmap uses 4-level intensity scale matching accent color palette
- `renderStatsBar()` called on init and after every new entry save

### v1.0 — April 7, 2026
- Initial build
- Vertical timeline with connecting line and entry dots
- 12-hour timestamp format
- Auto-scroll to newest entry
- Text input with Ctrl+Enter shortcut
- Mini calendar (top-right) with entry day highlighting and click-to-navigate
- Month navigation (Prev/Next)
- Export current month to Markdown (.md)
- IndexedDB persistence

---

## Roadmap

Items are ordered by priority within each tier. Check off as completed.

### 🔴 High Priority

- [x] **Stats bar** — Compact strip above the timeline showing: entries today, current streak (consecutive days with ≥1 entry), most active hour, 30-day activity heatmap (GitHub-style)
- [x] **Delete entry** — Delete button at end of entry content, subtle styling, confirm step before removal
- [x] **Edit entry text** — Click entry text to edit inline; save on blur or Enter
- [x] **Time updater** — Click timestamp to edit it inline; maintain 12-hour format
- [ ] data storage for notes

### 🟡 Medium Priority

- [x] **Entry count badge on calendar days** — Show number of entries per day inside the calendar dot/cell
- [x] **Mood/energy tag** — Optional tag per entry (😊 😐 😤 😴); stored with entry; shown in stats over time
- [x] **Jump to Today button** — One-click return to today's date from any month view
- [ ] **Date range export** — Replace current "export this month" with a date picker (from / to) so the user can export any span of days; UI appears as a small inline form triggered from the export button
- [x] **Word count display** — Live counter in the input area while writing
- [x] **Project breakout panels** — Insert a breakout card into the main timeline that links to a separate project timeline in a side panel; project entries are independent from the main journal *(Implemented v1.8)*

### 🟢 Low Priority

- [x] **Delete project notes** — Delete button on individual entries inside the project side panel; requires `deleteProjectEntry(id)` DB helper on `project_entries` store and re-render of panel timeline + breakout card count
- [x] **Project card timeline connector** — Visual line extending from the breakout card's left edge to the main timeline vertical line; implemented via `::before`/`::after` pseudo-elements on `.breakout-card` *(v1.10)*
  - [ ] Follow-up: breakout dot still slightly off-center on the timeline — needs positional tweak

- [x] **Project grouping within timeline** — Project badge on each entry card; timeline stays chronological; autocomplete from prior project names; collapsible section CSS ready for future grouped view
- [ ] **Dark/Light theme toggle** — User preference stored in localStorage
- [ ] **Pinned/starred entries** — Star an entry to surface it at top of day or in a favorites view
- [ ] **Markdown preview** — Toggle between raw and rendered markdown in entry view
- [ ] **Keyboard navigation** — Navigate entries with arrow keys
- [ ] **Backup/Restore** — Export/import entire IndexedDB as JSON

---
# Future update Ideas
1. Multi team - Groups can work on the same time line for the same day projects. 
	1. Time line would show the name of the person who input an entry into the timeline
	2. 

---

## Design Constraints (Do Not Change)

These values are calibrated to prevent visual overlap between the timeline line, dot, and timestamp text.

| Element | Property | Value |
|---------|----------|-------|
| Timeline padding-left | `padding-left` | `120px` |
| Timeline line position | `left` | `50px` |
| Entry dot position | `left` | `-75px` |
| Entry time position | `left` | `-105px` |
| Entry time width | `width` | `95px` |
| Entry time text-align | `text-align` | `right` |

**Note on new UI elements:** Delete buttons belong at the end of `.entry-content`, small and muted. Edit controls should appear inline without breaking the dot/line layout.

---

## Color Profile

| Token | Hex | Usage |
|-------|-----|-------|
| `bg-primary` | `#1a1a2e` | Body background |
| `bg-secondary` | `#16213e` | Header, entry cards, input section |
| `bg-accent` | `#0f3460` | Timeline line, borders, inactive states |
| `accent` | `#e94560` | Dots, buttons, highlights, selected states |
| `accent-hover` | `#ff6b6b` | Button hover |
| `text-primary` | `#eaeaea` | Main text |
| `text-secondary` | `#888888` | Timestamps, labels |
| `text-muted` | `#666666` | Empty state, entry dates |
| `disabled` | `#444444` | Disabled button backgrounds |

---

## Layout

# This area needs to be updated

```
┌─────────────────────────────────────────────────────┐
│  [Stats Bar: streak · entries today · heatmap]      │
├─────────────────────────────────────────────────────┤
│  [Mini Calendar]              [Export Button]       │
│  [◄ Month ►]                                        │
├─────────────────────────────────────────────────────┤
│                                                     │
│    10:30 AM │ ● Entry 3                [edit][del]  │
│             │                                       │
│     8:15 AM │ ● Entry 2                [edit][del]  │
│             │                                       │
│     7:00 AM │ ● Entry 1                [edit][del]  │
│             │                                       │
├─────────────────────────────────────────────────────┤
│  [Text Input Area]                     [word count] │
│  [Selected Date]                   [Add Entry ▶]    │
└─────────────────────────────────────────────────────┘
```

---

## Dev Notes

- All CSS lives in the `<style>` block; all JS in the `<script>` block at the bottom — keep it that way
- To reset data: DevTools (F12) → Application → IndexedDB → Delete `JournalDB`
- Works in any modern browser with no build step
- IndexedDB is per-origin — the file needs to be served from the same path to retain data

### Future Storage Options (if needed)
- **SQLite-WASM** — runs in-browser, more robust querying
- **Electron wrapper** — native app feel, access to filesystem

---

## File Structure

```
Journal App/
├── journal.html             # The complete application
└── MASTER_PROJECT_LOG.md    # This file
```

---
## Noted updates
4/8/2026
All changes are complete. Here's what was added:

**New features:**

- **Tag input** in the new-entry form (between mood and textarea) — type a tag and press `Enter` or `,` to add it; `Backspace` removes the last tag; comma-separated pastes work too
- **Tag chips on entry cards** — saved tags display as `#tagname` pills; clicking one activates the tag filter
- **Tag filter view** — clicking any tag chip shows all entries with that tag across all dates, grouped by date, with a "Filtered by: #tag [✕ Clear]" bar at the top
- **Inline tag editing** — a "tags" button on each card opens the tag input widget inline; focus-away saves and reverts to chips
- **Markdown export** — tags are appended as `#tagname` at the end of each exported entry line

**Backward compatible** — existing entries without tags render cleanly with no errors.

---

## Project Breakout Panels (Future Feature — Fully Planned)

**Goal:** Insert a breakout card into the main timeline that links to a separate project timeline displayed in a slide-in side panel. Project entries are completely independent from the main journal.

**Motivation:** When switching between multiple tasks/projects during a workday, users need a way to context-switch cleanly — keeping project notes separate from general journal entries, while still seeing where the switch happened in the main timeline.

### User Decisions (Finalized)
- **Panel style:** Side panel — slides in from the right, main timeline stays visible alongside it
- **Entry ownership:** Project-only — entries added in the panel do not appear in the main day timeline
- **Insert trigger:** Manual — a "+" button in the input area; user names the project at that moment

### Visual Layout
```
┌──────────────────────┬─────────────────────────────┐
│ Main Timeline        │ 🔗 BOM Project          [✕]│
│ ─────────────────    ├─────────────────────────────┤
│ 4:24 PM ● [entry]    │ 4:24 PM ● Last BOM page     │
│                      │ 3:09 PM ● Updating parts    │
│ ┌──────────────────┐ │                             │
│ │ 🔗 BOM Project   │ │ ┌─────────────────────────┐ │
│ │ 3 entries [open→]│─┼▶│ Add note to project...  │ │
│ └──────────────────┘ │ └─────────────────────────┘ │
│                      │              [ Add Entry ]  │
│ 3:09 PM ● [entry]    │                             │
└──────────────────────┴─────────────────────────────┘
```

### Data Model
Requires IndexedDB **version bump from 1 → 2**, adding two new object stores:

```javascript
// 'projects' store
{ id: number (auto), name: string, created: string (ISO) }

// 'project_entries' store  (index on projectId)
{ id: number (auto), projectId: number, text: string,
  date: string, timestamp: number, mood: string|null, tags: string[] }

// Breakout markers — stored in existing 'entries' store as a special type:
{ type: 'breakout', projectId: number, projectName: string, date, timestamp, id }
```

### New DB Functions Needed
- `createProject(name)` → Promise\<id\>
- `getAllProjects()` → Promise\<project[]\>
- `saveProjectEntry(projectId, text, date, mood, tags)` → Promise\<id\>
- `getProjectEntries(projectId)` → Promise\<entry[]\> sorted desc by timestamp
- `getProjectEntryCount(projectId)` → Promise\<number\>
- `insertBreakoutMarker(projectId, projectName, date)` → saves to `entries` store
- `deleteBreakoutMarker(id)` → deletes from `entries` store

### New State Variables
```javascript
let activePanelProjectId = null;   // number | null
let existingProjects = [];         // cache for autocomplete
```

### HTML Changes
1. Wrap `timeline-container` + `input-section` in `<div class="main-col">` inside `<main>`
2. Add `<div id="sidePanel" class="side-panel" style="display:none">` as sibling in `<main>`
   - Contains: header (title + ✕ close), scrollable timeline div, input area (textarea + Add Entry)
3. Add `<button id="insertBreakoutBtn" class="project-break-btn">+ Project</button>` in `input-actions`

### renderTimeline() Changes
- Detect `entry.type === 'breakout'` in the map — render a breakout card instead of a regular entry
- Breakout card shows: project name, entry count (loaded async), "open →" button, ✕ delete button
- Add event listeners: open panel on "open →" click; delete marker on ✕ click

### New Functions
- `openProjectPanel(projectId, projectName)` — shows panel, sets title, calls `renderProjectTimeline()`
- `closeProjectPanel()` — hides panel, removes `main--panel-open` class
- `renderProjectTimeline(projectId)` — loads project entries, renders them in panel (grouped by date)
- `showBreakoutPrompt(projects)` — inline name input with autocomplete; on confirm creates/reuses project and inserts breakout marker

### CSS Changes
- `main.main--panel-open { flex-direction: row; }` — switches main from column to row layout
- `.main-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }` — wraps current content
- `.side-panel { width: 360px; flex-shrink: 0; }` — fixed width panel with slide-in animation
- `.breakout-card` — styled differently from regular entries; accent left border, card-style with "open →" button
- `.project-break-btn` — dashed ghost button in input-actions area

### Implementation Order
1. Bump `DB_VERSION` to 2; add `projects` and `project_entries` stores in `onupgradeneeded`
2. Add all new DB helper functions
3. Add new state variables
4. Update HTML: add `.main-col` wrapper, `#sidePanel`, `#insertBreakoutBtn`
5. Modify `renderTimeline()` to handle `type === 'breakout'` cards
6. Add `openProjectPanel()`, `closeProjectPanel()`, `renderProjectTimeline()`
7. Add `showBreakoutPrompt()` and confirm handler
8. Wire up panel submit handler and close button in `init()`
9. Add all CSS

---

## Project Grouping Design (Earlier Exploration — Superseded)

*The breakout panel approach above was chosen over this option. Kept for reference.*

**Original concept:** Add a `project` field to each regular entry, then group entries by project within the day timeline using section headers. Clicking a header shows a cross-date filtered view for that project.

**Why not chosen:** The breakout panel approach is cleaner — project notes stay completely separate from the journal stream, and the side-by-side panel feels more natural for context-switching between tasks.