Implement Doodle Canvas Feature: Drawing and Handwriting Attachments in Notes

[Copilot]

This PR implements a comprehensive doodle canvas feature that allows users to create, edit, and save drawings as attachments in their notes. The implementation includes vector-based stroke storage, thumbnail generation, and premium feature gating.

Key Features Implemented

Enhanced Drawing Canvas

• Full-featured drawing interface with pen, eraser, color palette, and brush size options
• Advanced tools for premium users including highlighter, brush, and extended color palette
• Undo/redo functionality with stroke-level granularity
• Real-time drawing with smooth stroke rendering using custom painter

Vector-Based Storage System

• JSON serialization of drawing strokes preserving editability
• DoodleData model supporting layers, strokes, and metadata
• Repository integration for persistent storage in app directory
• Attachment system extension with new "doodle" type

Thumbnail Generation

• PNG thumbnail creation for note list previews
• Scalable rendering maintaining aspect ratios
• Placeholder thumbnails for empty doodles
• Memory-efficient caching of generated thumbnails

Note Integration

• Seamless attachment workflow - doodles saved as note attachments
• Display widget showing doodle thumbnails in note interface
• Edit-in-place functionality allowing users to reopen and modify existing doodles
• Reference insertion in note content with doodle markers

Premium Feature Gating

• Basic tools (pen, eraser, 6 colors, 3 brush sizes) available to all users
• Premium tools (highlighter, brush, 14 colors, 6 brush sizes) gated behind premium status
• Upgrade prompts with clear premium feature descriptions

Technical Implementation

Data Models

// Vector stroke storage
class DoodleStroke {
  final List<Offset> points;
  final Color color;
  final double width;
  final String toolType;
  // ... additional properties
}

// Layer support for premium users
class DoodleLayer {
  final String id;
  final List<DoodleStroke> strokes;
  final bool isVisible;
  final double opacity;
  // ... layer properties
}

Storage Architecture

• File-based persistence using JSON format for vector data
• Repository pattern with doodle-specific CRUD operations
• Automatic cleanup when doodles are removed from notes
• Path-based references in note model for efficient loading

UI Components

• DrawingCanvasWidget: Full-screen drawing interface with tool palette
• DoodleDisplayWidget: Grid/list view for doodle thumbnails
• Thumbnail generation service: Background processing for preview images

Testing Coverage

Comprehensive Test Suite

• Model tests for DoodleData, DoodleStroke, and DoodleLayer serialization
• Service integration tests covering CRUD operations and error handling
• Note model tests validating doodle path management
• Mock repository for isolated service testing

Example Test Cases

test('should save and load doodle with strokes', () async {
  final doodleData = DoodleData.createNew();
  final stroke = DoodleStroke(/* ... */);
  // Test vector data persistence and retrieval
});

User Experience

Workflow

1. Creation: Tap drawing button in note editor → opens full-screen canvas
2. Drawing: Use tools palette to select pen, colors, sizes
3. Saving: Automatic save with unsaved changes detection
4. Viewing: Thumbnails displayed in note with stroke count
5. Editing: Tap thumbnail to reopen in canvas for modifications

Premium Upgrade Experience

• Progressive disclosure of premium tools with lock indicators
• Contextual upgrade prompts explaining premium benefits
• Non-disruptive gating - basic functionality always available

File Structure Changes

lib/
├── models/
│   ├── doodle_data.dart          # New vector data models
│   ├── attachment.dart           # Extended for doodle type
│   └── note_model.dart          # Added doodle paths support
├── services/
│   ├── doodle_thumbnail_service.dart  # New thumbnail generation
│   └── notes/notes_service.dart      # Extended for doodle operations
├── repositories/
│   └── notes_repository.dart         # Added doodle persistence methods
├── widgets/
│   └── doodle_display_widget.dart    # New doodle viewer component
└── presentation/note_creation_editor/widgets/
    └── drawing_canvas_widget.dart    # Enhanced drawing interface

This implementation provides a solid foundation for digital handwriting and drawing capabilities while maintaining the app's performance and user experience standards.

Fixes #21.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.