Jasonb/JournalApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5d35dcfe03cffe640b934a47d501cc7a612d258f
JournalApp/Master_Project_log.md
T
JasonBrock 5d35dcfe03 Initial commit — Work Journal project (prototype, Android app, backups, project log) 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-28 11:14:32 -04:00

22 KiB
Raw Blame History

banner, banner-height, pixel-banner-flag-color
banner banner-height pixel-banner-flag-color
pixel-banner-images/wp4254880-dark-4k-wallpapers.jpg 460 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

  • 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)
  • Delete entry — Delete button at end of entry content, subtle styling, confirm step before removal
  • Edit entry text — Click entry text to edit inline; save on blur or Enter
  • Time updater — Click timestamp to edit it inline; maintain 12-hour format
  • data storage for notes

🟡 Medium Priority

  • Entry count badge on calendar days — Show number of entries per day inside the calendar dot/cell
  • Mood/energy tag — Optional tag per entry (😊 😐 😤 😴); stored with entry; shown in stats over time
  • 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
  • Word count display — Live counter in the input area while writing
  • 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

  • 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

  • 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

  • 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

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:

// '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

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.

Reference in New Issue View Git Blame Copy Permalink