mathieu/personotes

Public Access

Fork 0

Files

Mathieu Aumont 1d5a0fb39b Upgrade Readme

2025-11-11 16:48:22 +01:00

16 KiB

Raw Blame History

Changelog

All notable changes to Project Notes will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[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 Project Notes" 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):

// 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):

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

Daily Journal: Track daily activities and reflections
Project Log: Document daily progress on projects
Stand-up Notes: Prepare daily stand-up meetings
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):

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):

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:

Review the new HTMX coordination pattern in ARCHITECTURE.md
Replace manual fetch() calls with htmx.ajax()
Replace MutationObserver with HTMX event listeners
Remove manual calls to htmx.process()

Build process remains unchanged:

cd frontend
npm run build
cd ..
go run ./cmd/server

For Users

No action required. Simply pull the latest code and rebuild:

git pull
cd frontend && npm run build && cd ..
go run ./cmd/server

Contributing

See 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

16 KiB Raw Blame History Unescape Escape

Changelog

[2.3.0] - 2025-11-11

Added

Changed

Fixed

Technical

Documentation

[2.2.0] - 2025-11-11

Added

Changed

[2.1.2] - 2025-11-11

Fixed

[2.1.1] - 2025-01-11

Daily Notes UX Improvement 🎨

Changed

Technical

[2.1.0] - 2025-01-11

Daily Notes Feature 📅

Added

Technical Details

Changed

Use Cases

[2.0.0] - 2025-01-11

Architecture Optimization Release 🎯

Changed

Fixed

Added

Technical Details

[1.0.0] - 2025-01-08

Initial Release with CodeMirror 6 🚀

Added

Changed

Technical Stack

Security

Performance

[0.1.0] - Early Development

Initial Prototype

Migration Guide: 1.x → 2.0

For Developers

For Users

Contributing

16 KiB

Raw Blame History