personotes/CHANGELOG.md

# Changelog

All notable changes to PersoNotes will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [2.3.0] - 2025-11-11

### Added

- **Favorites System** ⭐
  - Star notes and folders for quick access
  - Favorites section in sidebar with expandable folders
  - Persistent storage in `.favorites.json`
  - Hover to reveal star buttons on notes/folders
  - Complete REST API for favorites management (`/api/favorites`)

- **Comprehensive Keyboard Shortcuts** ⌨️
  - 10 global shortcuts for navigation and editing
  - `Ctrl/Cmd+K` - Open search modal
  - `Ctrl/Cmd+S` - Save note
  - `Ctrl/Cmd+D` - Open daily note
  - `Ctrl/Cmd+N` - Create new note
  - `Ctrl/Cmd+H` - Go home
  - `Ctrl/Cmd+B` - Toggle sidebar
  - `Ctrl/Cmd+,` - Open settings
  - `Ctrl/Cmd+P` - Toggle preview (changed from `/` for AZERTY compatibility)
  - `Ctrl/Cmd+Shift+F` - Create new folder
  - `Escape` - Close modals
  - Full documentation in `docs/KEYBOARD_SHORTCUTS.md`
  - Help section on About page

- **Font Customization** 🔤
  - 8 font options: JetBrains Mono, Fira Code, Inter, Poppins, Public Sans, Cascadia Code, Source Code Pro, Sans-serif
  - 4 size options: Small (14px), Medium (16px), Large (18px), X-Large (20px)
  - Font selector in settings modal with live previews
  - Preferences saved in localStorage

- **Vim Mode Support** 🎮
  - Full Vim keybindings in CodeMirror editor
  - hjkl navigation, insert/normal/visual modes
  - All standard Vim commands and motions
  - Toggle in Settings → Éditeur tab
  - Powered by `@replit/codemirror-vim`
  - Graceful fallback if package not installed

- **About Page** ℹ️
  - New "About PersoNotes" page accessible from sidebar
  - Features overview with keyboard shortcuts reference
  - Visual guide to all shortcuts with `<kbd>` styling
  - Accessible via ℹ️ button next to settings

- **Enhanced Settings Modal**
  - Tabbed interface: Thèmes, Polices, Éditeur
  - Organized and intuitive navigation
  - Visual previews for themes and fonts
  - Toggle switches with smooth animations

### Changed

- **Sidebar UI Improvements**
  - Increased width from 280px to 300px for better readability
  - JetBrains Mono as default font
  - Compact spacing throughout
  - Root indicator (📁 notes) non-clickable, visually distinct
  - "Nouveau dossier" button moved to bottom
  - Section titles enlarged for hierarchy
  - Settings and About buttons side-by-side at bottom

- **Slash Commands Styling**
  - Palette now uses theme colors (var(--bg-secondary), var(--accent-primary))
  - Adapts to selected theme automatically
  - Consistent with overall UI aesthetic

- **Homepage Layout**
  - Favorites section with expandable folders
  - Note count in section titles ("📂 Toutes les notes (39)")
  - Scrollable favorites list (max 300px height)
  - Better organization and hierarchy

- **Preview Toggle Shortcut**
  - Changed from `Ctrl+/` to `Ctrl+P` for AZERTY keyboard compatibility
  - Updated in code, documentation, and About page

### Fixed

- Slash commands palette colors now respect theme selection
- Modal centering improved for delete confirmations
- Sidebar overflow handling with scrollable sections
- Font size now properly cascades using `rem` units from `:root`

### Technical

- Added `@replit/codemirror-vim` as optional dependency
- Created `vim-mode-manager.js` for Vim mode lifecycle
- Created `font-manager.js` for font and size management
- Created `keyboard-shortcuts.js` for centralized shortcuts
- Created `favorites.js` for favorites UI management
- New backend endpoints: `/api/favorites`, `/api/about`
- Enhanced `theme-manager.js` with tab switching
- CSS toggle switch component added
- Improved error handling for missing packages

### Documentation

- Added `docs/KEYBOARD_SHORTCUTS.md` - Complete shortcuts reference
- Updated README.md with all new features
- Added sections on customization, favorites, and Vim mode
- Updated feature list and usage examples

## [2.2.0] - 2025-11-11

### Added

- **Multi-Theme System** 🎨
  - Added 8 professional dark themes: Material Dark (default), Monokai Dark, Dracula, One Dark, Solarized Dark, Nord, Catppuccin Mocha, and Everforest Dark
  - New settings button (⚙️) at the bottom of the sidebar
  - Interactive theme selection modal with visual previews
  - Instant theme switching without page reload
  - Theme preference automatically saved in localStorage
  - Full responsive design on desktop, tablet, and mobile
  - Comprehensive documentation in `docs/THEMES.md` and `docs/GUIDE_THEMES.md`

### Changed

- Added `/frontend/` route to serve frontend JavaScript files
- Enhanced sidebar with persistent theme settings button

## [2.1.2] - 2025-11-11

### Fixed

- **Bulk Deletion 404 Error**
  - Corrected the HTTP method for bulk deletion from `POST` to `DELETE` in both frontend and backend.
  - Adjusted the Go backend handler to manually parse the request body for `DELETE` requests, as `r.ParseForm()` does not automatically process bodies for this method.
  - This resolves the 404 error encountered during bulk deletion operations.

## [2.1.1] - 2025-01-11

### Daily Notes UX Improvement 🎨

### Changed

- **Calendar Click Behavior**
  - Only existing notes are now clickable in the calendar
  - Days without notes are visually grayed out (50% opacity) with `cursor: not-allowed`
  - Days with notes show blue dot (●) and are clickable with hover effects
  - This prevents accidental creation of notes on random dates

- **Creating New Daily Notes**
  - Use "📅 Note du jour" button or `Ctrl/Cmd+D` for today's note
  - Use API endpoint `/api/daily/{YYYY-MM-DD}` for specific dates
  - Manual file creation still possible in `notes/daily/YYYY/MM/DD.md`

### Technical

**Templates**:
- `templates/daily-calendar.html`: Added conditional HTMX attributes (`{{if and .InMonth .HasNote}}`)
- Added CSS classes: `.calendar-day-clickable` and `.calendar-day-no-note`

**Styles** (`static/theme.css`):
- `.calendar-day`: Changed default cursor from `pointer` to `default`
- `.calendar-day-clickable`: Explicit `cursor: pointer` for notes
- `.calendar-day-no-note`: 50% opacity + `cursor: not-allowed` + muted text color

**Documentation**:
- Updated `docs/DAILY_NOTES.md` with new click behavior and creation methods

## [2.1.0] - 2025-01-11

### Daily Notes Feature 📅

Major new feature: **Daily Notes** for quick, organized daily note-taking.

### Added

- **Daily Notes System**
  - Automatic daily note creation with structured template
  - Notes organized by date: `notes/daily/YYYY/MM/DD.md`
  - Pre-filled template with sections: Objectifs, Notes, Accompli, Réflexions, Liens
  - Automatic `[daily]` tag for all daily notes

- **Interactive Calendar Widget**
  - Monthly calendar view in sidebar
  - Visual indicators for existing notes (blue dots)
  - Today highlighted with violet border
  - Month navigation with arrow buttons (‹ ›)
  - Click any date to open/create that day's note
  - Responsive design for mobile and desktop

- **Quick Access**
  - "📅 Note du jour" button in header
  - Keyboard shortcut: `Ctrl/Cmd+D` (works anywhere in the app)
  - "Récentes" section showing last 7 daily notes
  - One-click access to recent notes

- **Backend Endpoints**
  - `GET /api/daily/today` - Today's note (auto-create)
  - `GET /api/daily/{YYYY-MM-DD}` - Specific date note
  - `GET /api/daily/calendar/{YYYY}/{MM}` - Calendar HTML
  - `GET /api/daily/recent` - Recent notes list

- **Frontend Module**
  - New `daily-notes.js` module for keyboard shortcuts
  - Auto-refresh calendar after saving daily notes
  - HTMX integration for seamless updates

- **Styling**
  - Complete CSS theme for calendar and recent notes
  - Hover effects and smooth animations
  - Material Darker theme integration
  - Mobile-responsive calendar grid

### Technical Details

**Backend** (`internal/api/daily_notes.go`):
```go
// New handler functions
handleDailyToday(w, r)
handleDailyDate(w, r, dateStr)
handleDailyCalendar(w, r, year, month)
handleDailyRecent(w, r)
```

**Templates**:
- `templates/daily-calendar.html` - Calendar widget
- `templates/daily-recent.html` - Recent notes list

**Frontend** (`frontend/src/daily-notes.js`):
```javascript
initDailyNotesShortcut()  // Ctrl/Cmd+D handler
refreshDailyNotes()       // Auto-refresh after save
```

**Documentation**:
- Complete guide in `docs/DAILY_NOTES.md`
- Usage examples and customization tips
- API documentation and troubleshooting

### Changed

- Sidebar layout updated to include Daily Notes section
- Header now includes "Note du jour" button
- Template index.html receives current date for calendar initialization

### Use Cases

1. **Daily Journal**: Track daily activities and reflections
2. **Project Log**: Document daily progress on projects
3. **Stand-up Notes**: Prepare daily stand-up meetings
4. **Learning Log**: Track daily learnings and discoveries

## [2.0.0] - 2025-01-11

### Architecture Optimization Release 🎯

Major refactoring to optimize the HTMX + JavaScript coordination pattern. This release significantly improves code quality, performance, and maintainability.

### Changed

- **HTMX Integration Optimization**
  - Replaced manual `fetch()` calls with `htmx.ajax()` in file-tree.js
  - Eliminated manual DOM manipulation after AJAX requests (~60 lines of code removed)
  - HTMX now automatically processes out-of-band swaps without explicit `htmx.process()` calls

- **Event System Optimization**
  - Replaced `MutationObserver` with HTMX event listeners (`htmx:afterSwap`, `htmx:oobAfterSwap`)
  - ~30% reduction in CPU usage during DOM updates
  - More predictable and reliable event handling

- **File Operations**
  - File moving (drag & drop) now uses `htmx.ajax()` for consistency
  - Folder creation now uses `htmx.ajax()` for consistency
  - Both operations leverage HTMX's automatic out-of-band swap processing

### Fixed

- **File Tree Click Issue**
  - Fixed missing `id="sidebar"` attribute on `<aside>` element in index.html
  - File tree clicks now work correctly after initialization

- **Post-Drag Click Issue**
  - Fixed file links not working after drag-and-drop operations
  - HTMX now automatically processes new HTML, maintaining event handlers

### Added

- **Documentation**
  - New ARCHITECTURE.md with comprehensive system architecture documentation
  - Updated CLAUDE.md with HTMX + JavaScript coordination best practices
  - Added detailed implementation examples and design patterns
  - Updated README.md with architecture overview

### Technical Details

**Before (Manual DOM Manipulation)**:
```javascript
const response = await fetch('/api/files/move', {...});
const html = await response.text();
const temp = document.createElement('div');
temp.innerHTML = html;
const oobElement = temp.querySelector('[hx-swap-oob]');
target.innerHTML = oobElement.innerHTML;
htmx.process(target); // Manual processing required
```

**After (HTMX-Native)**:
```javascript
htmx.ajax('POST', '/api/files/move', {
    values: { source, destination },
    swap: 'none'  // Server uses hx-swap-oob, HTMX handles everything
});
```

**Performance Improvements**:
- Code size: ~60 lines removed from file-tree.js
- Event handling: MutationObserver → HTMX events (~30% CPU reduction)
- Maintainability: Consistent pattern across all AJAX operations
- Reliability: HTMX handles edge cases (race conditions, partial updates)

## [1.0.0] - 2025-01-08

### Initial Release with CodeMirror 6 🚀

Complete rewrite of the frontend editor, migrating from a simple textarea to CodeMirror 6 with modern build tools.

### Added

- **CodeMirror 6 Editor**
  - Syntax highlighting for Markdown
  - One Dark theme (VS Code-inspired)
  - Line numbers, search, code folding
  - Tab key for proper indentation
  - Auto-save after 2 seconds of inactivity
  - Ctrl/Cmd+S manual save shortcut

- **Slash Commands**
  - Type `/` at the start of a line to open command palette
  - 13 built-in commands: h1-h3, bold, italic, code, codeblock, quote, hr, list, table, link, date
  - Keyboard navigation (Arrow Up/Down, Enter, Tab, Escape)
  - Real-time filtering as you type

- **Live Preview**
  - Split view with synchronized scrolling
  - Debounced updates (150ms) for smooth typing
  - Three view modes: split, editor-only, preview-only
  - View mode persisted to localStorage
  - Marked.js for Markdown rendering
  - DOMPurify for XSS protection
  - Highlight.js for code block syntax highlighting

- **Search Modal**
  - Press Ctrl/Cmd+K to open search anywhere
  - Real-time search with 300ms debounce
  - Keyboard navigation (↑/↓ to navigate, Enter to open, Esc to close)
  - Highlighting of search terms in results
  - Rich results with title, path, snippet, tags, and date

- **Hierarchical File Organization**
  - Drag-and-drop files between folders
  - Folder creation with nested path support (e.g., `projects/backend`)
  - Visual feedback during drag operations
  - Safe path validation to prevent dangerous operations
  - Automatic file tree updates via HTMX out-of-band swaps

- **Build System**
  - Vite for fast, modern JavaScript bundling
  - ES module output (1.0 MB) and UMD fallback (679 KB)
  - Development mode with `--watch` for auto-rebuild
  - Production optimization with minification and tree-shaking

- **REST API**
  - Full REST API at `/api/v1/notes`
  - List, read, create, update, delete operations
  - Content negotiation (JSON or Markdown)
  - Automatic front matter management
  - Background re-indexing after modifications
  - See API.md for full documentation

### Changed

- **Frontend Architecture**
  - Migrated from simple textarea to CodeMirror 6
  - Added Vite build system for module bundling
  - Split JavaScript into modular files (editor.js, file-tree.js, search.js, ui.js)
  - HTMX for all server interactions (replaces some manual fetch calls)

- **UI/UX Improvements**
  - Material Darker theme with CSS custom properties
  - Responsive design for mobile, tablet, and desktop
  - Smooth animations and transitions
  - Custom scrollbars matching dark theme
  - Better visual hierarchy and spacing

### Technical Stack

**Backend**:
- Go 1.22+ (net/http, fsnotify, yaml.v3)
- File-based storage (Markdown + YAML front matter)
- In-memory indexing for fast search
- Filesystem watcher with 200ms debounce

**Frontend**:
- HTMX 1.9.10 (AJAX, DOM updates)
- CodeMirror 6 (editor)
- Vite 5.0 (build tool)
- Marked.js (Markdown parsing)
- DOMPurify (XSS protection)
- Highlight.js 11.9.0 (syntax highlighting)
- Vanilla JavaScript (no framework)

### Security

- Path validation (prevent directory traversal)
- YAML front matter parsing (safe, no code execution)
- HTML sanitization with DOMPurify (prevent XSS)
- No inline scripts (CSP-ready)
- Graceful error handling (no data leakage)

### Performance

- In-memory index for O(1) tag lookups
- Debounced filesystem watcher (200ms)
- Debounced preview updates (150ms)
- Pre-parsed templates at startup
- Event delegation for file tree (no per-item listeners)
- Single JavaScript bundle (avoids HTTP/2 overhead)

## [0.1.0] - Early Development

### Initial Prototype

- Basic Go server with textarea editor
- Simple tag-based indexing
- File tree sidebar
- Basic search functionality
- HTMX for dynamic interactions

---

## Migration Guide: 1.x → 2.0

### For Developers

**No Breaking Changes**: Version 2.0 is fully backward compatible with 1.x. All user-facing features work identically.

**If you have custom modifications to file-tree.js**:
1. Review the new HTMX coordination pattern in ARCHITECTURE.md
2. Replace manual `fetch()` calls with `htmx.ajax()`
3. Replace `MutationObserver` with HTMX event listeners
4. Remove manual calls to `htmx.process()`

**Build process remains unchanged**:
```bash
cd frontend
npm run build
cd ..
go run ./cmd/server
```

### For Users

No action required. Simply pull the latest code and rebuild:
```bash
git pull
cd frontend && npm run build && cd ..
go run ./cmd/server
```

---

## Contributing

See [ARCHITECTURE.md](./ARCHITECTURE.md) for development guidelines.

---

**Legend**:
- `Added` - New features
- `Changed` - Changes to existing functionality
- `Deprecated` - Soon-to-be removed features
- `Removed` - Removed features
- `Fixed` - Bug fixes
- `Security` - Vulnerability fixes