144 lines
4.9 KiB
Markdown
144 lines
4.9 KiB
Markdown
# Ironpad Frontend
|
|
|
|
Vue 3 single-page application for Ironpad.
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Open http://localhost:5173 (requires backend running on port 3000).
|
|
|
|
## Tech Stack
|
|
|
|
- **Vue 3** with Composition API and `<script setup>`
|
|
- **TypeScript** for type safety
|
|
- **Vite** for fast development and builds
|
|
- **Pinia** for state management
|
|
- **Vue Router** for navigation
|
|
- **Milkdown** for WYSIWYG Markdown editing
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── api/ # API client for backend communication
|
|
│ └── client.ts
|
|
├── components/ # Reusable Vue components
|
|
│ ├── MilkdownEditor.vue # Editor wrapper
|
|
│ ├── MilkdownEditorCore.vue # Core editor logic
|
|
│ ├── Sidebar.vue # Navigation sidebar
|
|
│ ├── GitPanel.vue # Git operations panel
|
|
│ └── ...
|
|
├── composables/ # Vue composables
|
|
│ └── useWebSocket.ts
|
|
├── router/ # Vue Router configuration
|
|
│ └── index.ts
|
|
├── stores/ # Pinia stores
|
|
│ ├── notes.ts # Notes state
|
|
│ ├── projects.ts # Projects state
|
|
│ ├── tasks.ts # Tasks state
|
|
│ ├── git.ts # Git state
|
|
│ ├── theme.ts # Theme state
|
|
│ ├── ui.ts # UI state
|
|
│ ├── websocket.ts # WebSocket state
|
|
│ └── workspace.ts # Workspace state
|
|
├── types/ # TypeScript type definitions
|
|
│ └── index.ts
|
|
├── views/ # Route views
|
|
│ ├── DashboardView.vue # Home page with project cards + task summaries
|
|
│ ├── ProjectView.vue # Project overview with editor
|
|
│ ├── ProjectNotesView.vue # Project notes split view
|
|
│ ├── ProjectsView.vue # Projects management list
|
|
│ ├── TasksView.vue # Task split view (list + detail)
|
|
│ ├── CalendarView.vue # Month grid calendar
|
|
│ └── DailyView.vue # Daily notes
|
|
├── App.vue # Root component
|
|
├── main.ts # Entry point
|
|
└── style.css # Global styles
|
|
```
|
|
|
|
## Key Components
|
|
|
|
### Milkdown Editor
|
|
|
|
The editor consists of two components:
|
|
|
|
- **MilkdownEditor.vue** — Wrapper component that accepts a `:key` prop for recreation
|
|
- **MilkdownEditorCore.vue** — Core editor using the `@milkdown/vue` integration
|
|
|
|
**Critical Pattern**: When switching between notes/tasks, content MUST be set BEFORE updating the editor key:
|
|
|
|
```javascript
|
|
// CORRECT order:
|
|
editorContent.value = newContent // Set content first
|
|
editorKey.value = noteId // Then trigger editor recreation
|
|
|
|
// WRONG order (causes stale content):
|
|
editorKey.value = noteId // Editor recreates with wrong content
|
|
editorContent.value = newContent // Too late!
|
|
```
|
|
|
|
### Task System Features
|
|
|
|
The task view (`TasksView.vue`) includes:
|
|
|
|
- **Tag system** — tags stored in YAML frontmatter, filterable via tag bar, autocomplete from project tags
|
|
- **Subtasks** — tasks with `parent_id` grouped under parents, inline creation, count badges
|
|
- **Recurring tasks** — daily/weekly/monthly/yearly, auto-creates next on completion
|
|
- **Due date picker** — inline date input, clearable, color-coded urgency display
|
|
- **Active/Backlog toggle** — move tasks between states
|
|
|
|
### Dashboard (`DashboardView.vue`)
|
|
|
|
Cross-project home page showing all projects as cards with:
|
|
- Active task count, backlog count, overdue count
|
|
- Top 5 active tasks per project with tags and due dates
|
|
- Click-through to project or individual task
|
|
|
|
### Calendar (`CalendarView.vue`)
|
|
|
|
Month grid calendar showing:
|
|
- Tasks plotted by `due_date` (only tasks with dates appear)
|
|
- Daily notes shown as blue dots
|
|
- Color-coded urgency (overdue=red, today=red, soon=yellow)
|
|
- Navigation: prev/next month, Today button
|
|
|
|
### State Management
|
|
|
|
Each domain has its own Pinia store:
|
|
|
|
- `notesStore` — Standalone notes CRUD
|
|
- `projectsStore` — Projects list and details
|
|
- `tasksStore` — Project tasks with active/backlog sections, tag filtering, subtask helpers
|
|
- `gitStore` — Git status, commits, push/pull
|
|
- `themeStore` — Dark/light mode
|
|
- `uiStore` — Search panel, modals
|
|
- `websocketStore` — Real-time connection state
|
|
- `workspaceStore` — Active project tracking
|
|
|
|
### Auto-save Behavior
|
|
|
|
Views implement smart auto-save that:
|
|
1. Tracks the "last saved content" when a note/task loads
|
|
2. Only saves when content differs from last saved
|
|
3. Uses 1-second debounce to batch rapid edits
|
|
4. Prevents unnecessary saves when just opening items
|
|
|
|
## Commands
|
|
|
|
```bash
|
|
npm run dev # Start dev server (hot reload)
|
|
npm run build # Production build to dist/
|
|
npm run preview # Preview production build
|
|
npm run lint # Run ESLint
|
|
```
|
|
|
|
## Environment
|
|
|
|
The frontend expects the backend API at `http://localhost:3000`. This is configured in `src/api/client.ts`.
|
|
|
|
For production, build the frontend and serve from any static host, configuring the API URL as needed.
|