fix: Add debounced Undo/Redo system to avoid character-by-character history

- Add debounced state updates for title and content (500ms delay) - Immediate UI updates with delayed history saving - Prevent one-letter-per-undo issue - Add cleanup for debounce timers on unmount
2026-01-04 14:28:11 +01:00
parent 355ffb59bb
commit 8d95f34fcc
4106 changed files with 630392 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,292 @@
+# Memento - Your Digital Notepad
+
+A beautiful and functional note-taking app inspired by Google Keep, built with Next.js 16, TypeScript, Tailwind CSS 4, and Prisma.
+
+## 🚀 Project Location
+
+The complete application is in the `keep-notes/` directory.
+
+## ✅ Completed Features
+
+### Core Functionality
+- ✅ Create, read, update, delete notes
+- ✅ Text notes and checklist notes
+- ✅ Pin/unpin notes
+- ✅ Archive/unarchive notes
+- ✅ Real-time search across all notes
+- ✅ Color customization (10 soft pastel themes)
+- ✅ Label management
+- ✅ Responsive masonry grid layout
+- ✅ Drag-and-drop note reordering
+- ✅ **Image upload with original size preservation**
+
+### UI/UX Features
+- ✅ Expandable note input (Google Keep style)
+- ✅ Modal note editor with full editing (`!max-w-[min(95vw,1600px)]`)
+- ✅ **Images display at original dimensions** (no cropping, `h-auto` without `w-full`)
+- ✅ Hover effects and smooth animations
+- ✅ **Masonry layout with CSS columns** (responsive: 1-5 columns)
+- ✅ **Soft pastel color themes** (bg-red-50, bg-blue-50, etc.)
+- ✅ Dark mode with system preference
+- ✅ Mobile responsive design
+- ✅ Icon-based navigation with 9 toolbar icons
+- ✅ Toast notifications (via shadcn)
+
+### Integration Features
+- ✅ **REST API** (4 endpoints: GET, POST, PUT, DELETE)
+  - `/api/notes` - List all notes
+  - `/api/notes` - Create new note
+  - `/api/notes/[id]` - Update note
+  - `/api/notes/[id]` - Delete note
+- ✅ **MCP Server** (Model Context Protocol) with 9 tools:
+  - `getNotes` - Fetch all notes
+  - `createNote` - Create new note
+  - `updateNote` - Update existing note
+  - `deleteNote` - Delete note
+  - `searchNotes` - Search notes by query
+  - `getNoteById` - Get specific note
+  - `archiveNote` - Archive/unarchive note
+  - `pinNote` - Pin/unpin note
+  - `addLabel` - Add label to note
+
+### Technical Features
+- ✅ Next.js 16 with App Router & Turbopack
+- ✅ Server Actions for mutations
+- ✅ TypeScript throughout
+- ✅ Tailwind CSS 4
+- ✅ shadcn/ui components (11 components)
+- ✅ Prisma ORM 5.22.0 with SQLite
+- ✅ Type-safe database operations
+- ✅ **Base64 image encoding** (FileReader.readAsDataURL)
+- ✅ **@modelcontextprotocol/sdk** v1.0.4
+
+## 🏃 Quick Start
+
+```bash
+cd keep-notes
+npm install
+npx prisma generate
+npx prisma migrate dev
+npm run dev
+```
+
+Then open http://localhost:3000
+
+## 📱 Application Features
+
+### 1. Note Creation
+- Click the input field to expand
+- Add title and content
+- **Upload images** (displayed at original size)
+- Switch to checklist mode with one click
+- Add labels and choose from 10 soft pastel colors
+
+### 2. Note Management
+- **Edit**: Click any note to open the editor (max-width: 95vw or 1600px)
+- **Pin**: Click pin icon to keep notes at top
+- **Archive**: Move notes to archive
+- **Delete**: Remove notes permanently
+- **Color**: Choose from 10 beautiful pastel colors
+- **Labels**: Add multiple labels
+- **Images**: Upload images that preserve original dimensions
+
+### 3. Checklist Notes
+- Create todo lists
+- Check/uncheck items
+- Add/remove items dynamically
+- Strike-through completed items
+
+### 4. Search & Navigation
+- Real-time search in header
+- Search by title or content
+- Navigate to Archive page
+- Dark/light mode toggle
+
+### 5. API Integration
+Use the REST API to integrate with other services:
+```bash
+# Get all notes
+curl http://localhost:3000/api/notes
+
+# Create a note
+curl -X POST http://localhost:3000/api/notes \
+  -H "Content-Type: application/json" \
+  -d '{"title":"API Note","content":"Created via API"}'
+
+# Update a note
+curl -X PUT http://localhost:3000/api/notes/1 \
+  -H "Content-Type: application/json" \
+  -d '{"title":"Updated","content":"Modified via API"}'
+
+# Delete a note
+curl -X DELETE http://localhost:3000/api/notes/1
+```
+
+### 6. MCP Server for AI Agents
+Start the MCP server for integration with Claude, N8N, or other MCP clients:
+```bash
+cd keep-notes
+npm run mcp
+```
+
+The MCP server exposes 9 tools for AI agents to interact with your notes:
+- Create, read, update, and delete notes
+- Search notes by content
+- Manage pins, archives, and labels
+- Perfect for N8N workflows, Claude Desktop, or custom integrations
+
+Example N8N workflow available in: `n8n-memento-workflow.json`
+
+## 🛠️ Tech Stack
+
+- **Frontend**: Next.js 16, React, TypeScript, Tailwind CSS 4
+- **UI Components**: shadcn/ui (11 components: Dialog, Tooltip, Badge, etc.)
+- **Icons**: Lucide React (Bell, Image, UserPlus, Palette, Archive, etc.)
+- **Backend**: Next.js Server Actions
+- **Database**: Prisma ORM 5.22.0 + SQLite (upgradeable to PostgreSQL)
+- **Styling**: Tailwind CSS 4 with soft pastel themes (bg-*-50)
+- **Layout**: CSS columns for masonry grid (responsive 1-5 columns)
+- **Images**: Base64 encoding, original size preservation
+- **Integration**: REST API + MCP Server (@modelcontextprotocol/sdk v1.0.4)
+
+## 📂 Project Structure
+
+```
+keep-notes/
+├── app/
+│   ├── actions/notes.ts       # Server actions (CRUD + images)
+│   ├── api/notes/             # REST API endpoints
+│   ├── archive/page.tsx       # Archive page
+│   ├── layout.tsx             # Root layout
+│   └── page.tsx               # Home page
+├── components/
+│   ├── ui/                    # shadcn components
+│   ├── header.tsx             # Navigation
+│   ├── note-card.tsx          # Note display (masonry, images)
+│   ├── note-editor.tsx        # Note editing (!max-w-[95vw])
+│   ├── note-input.tsx         # Note creation (image upload)
+│   └── note-grid.tsx          # Masonry layout
+├── lib/
+│   ├── types.ts               # TypeScript types (Note with images)
+│   └── utils.ts               # Utilities
+├── prisma/
+│   ├── schema.prisma          # Database schema (images String?)
+│   └── dev.db                 # SQLite database
+├── mcp/
+│   └── server.ts              # MCP server (9 tools)
+└── package.json               # Scripts: dev, build, start, mcp
+```
+│   ├── note-editor.tsx        # Edit modal
+│   ├── note-grid.tsx          # Grid layout
+│   └── note-input.tsx         # Note creation
+├── lib/
+│   ├── prisma.ts              # DB client
+│   ├── types.ts               # TypeScript types
+│   └── utils.ts               # Utilities
+└── prisma/
+    ├── schema.prisma          # Database schema
+    └── migrations/            # DB migrations
+```
+
+## 🎨 Color Themes
+
+The app includes 10 color themes:
+- Default (White)
+- Red
+- Orange  
+- Yellow
+- Green
+- Teal
+- Blue
+- Purple
+- Pink
+- Gray
+
+All themes support dark mode!
+
+## 🔧 Configuration
+
+### Database
+Currently uses SQLite. To switch to PostgreSQL:
+
+1. Edit `prisma/schema.prisma`:
+```prisma
+datasource db {
+  provider = "postgresql"
+}
+```
+
+2. Update `prisma.config.ts` with PostgreSQL URL
+3. Run: `npx prisma migrate dev`
+
+### Environment Variables
+Located in `.env`:
+```
+DATABASE_URL="file:./dev.db"
+```
+
+## 🚀 Deployment
+
+### Vercel (Recommended)
+```bash
+npm run build
+# Deploy to Vercel
+```
+
+### Docker
+```dockerfile
+FROM node:20-alpine
+WORKDIR /app
+COPY . .
+RUN npm install
+RUN npx prisma generate
+RUN npm run build
+CMD ["npm", "start"]
+```
+
+## 📝 Development Notes
+
+### Server Actions
+All CRUD operations use Next.js Server Actions:
+- `createNote()` - Create new note
+- `updateNote()` - Update existing note  
+- `deleteNote()` - Delete note
+- `getNotes()` - Fetch all notes
+- `searchNotes()` - Search notes
+- `togglePin()` - Pin/unpin
+- `toggleArchive()` - Archive/unarchive
+
+### Type Safety
+Full TypeScript coverage with interfaces:
+- `Note` - Main note type
+- `CheckItem` - Checklist item
+- `NoteColor` - Color themes
+
+### Responsive Design
+- Mobile: Single column
+- Tablet: 2 columns
+- Desktop: 3-4 columns
+- Auto-adjusts with window size
+
+## 🎯 Future Enhancements
+
+Possible additions:
+- User authentication (NextAuth.js)
+- Real-time collaboration
+- Image uploads
+- Rich text editor
+- Note sharing
+- Reminders
+- Export to PDF/Markdown
+- Voice notes
+- Drawing support
+
+## 📄 License
+
+MIT License - feel free to use for personal or commercial projects!
+
+---
+
+**Built with ❤️ using Next.js 16, TypeScript, and Tailwind CSS 4**
+
+Server running at: http://localhost:3000