---
# nuzlocke-tracker-d68l
title: 'Frontend: Journal entry editor and list view'
status: completed
type: task
priority: normal
created_at: 2026-03-20T15:15:55Z
updated_at: 2026-03-20T15:37:39Z
parent: nuzlocke-tracker-mz16
blocked_by:
    - nuzlocke-tracker-vmto
---

Create the frontend UI for writing and viewing journal entries.

## Design Decisions
- Plain markdown textarea (no WYSIWYG)
- Images via markdown URL syntax (`![alt](url)`)
- Blank slate — no templates
- Private only (no sharing UI)

## Checklist

- [x] Add `JournalEntry` TypeScript types to `frontend/src/types/`
- [x] Create API client functions for journal CRUD
- [x] Create `JournalList` component — chronological list of entries for a run
  - Show title, date, preview snippet, and linked boss (if any)
  - Link each entry to its detail/edit view
- [x] Create `JournalEditor` component — markdown textarea with title input
  - Optional boss result selector dropdown (link entry to a boss battle)
  - Preview tab to render markdown
  - Save and delete actions
- [x] Create `JournalEntryView` component — rendered markdown display
- [x] Add journal section/tab to the run detail page
- [x] Add route for journal entry detail/edit view


## Summary of Changes

Implemented the frontend journal entry editor and list view with the following components:

**Types created:**
- `frontend/src/types/journal.ts` - TypeScript types for JournalEntry, CreateJournalEntryInput, UpdateJournalEntryInput

**API client created:**
- `frontend/src/api/journal.ts` - CRUD functions for journal entries
- `frontend/src/hooks/useJournal.ts` - React Query hooks for journal data fetching and mutations

**Components created:**
- `frontend/src/components/journal/JournalList.tsx` - Chronological list of entries with title, date, preview snippet, and linked boss display
- `frontend/src/components/journal/JournalEditor.tsx` - Markdown textarea with title input, boss result selector, write/preview tabs, save/delete actions
- `frontend/src/components/journal/JournalEntryView.tsx` - Rendered markdown display with entry metadata
- `frontend/src/components/journal/JournalSection.tsx` - Wrapper component for embedding in RunEncounters page

**Pages created:**
- `frontend/src/pages/JournalEntryPage.tsx` - Standalone page for viewing/editing a single journal entry

**Modified files:**
- `frontend/src/types/index.ts` - Added journal type exports
- `frontend/src/pages/index.ts` - Added JournalEntryPage export
- `frontend/src/App.tsx` - Added route `/runs/:runId/journal/:entryId`
- `frontend/src/pages/RunEncounters.tsx` - Added Encounters/Journal tab navigation with JournalSection integration

**Features:**
- Tab navigation in run detail page to switch between Encounters and Journal views
- Create new journal entries with markdown content and optional boss battle linking
- Edit and delete existing entries
- Write/Preview toggle in editor
- Rendered markdown display with full prose styling