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

keep-notes/.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+/lib/generated/prisma

keep-notes/README.md

@@ -0,0 +1,104 @@
+# Keep Notes - Google Keep Clone
+
+A beautiful and feature-rich Google Keep clone built with modern web technologies.
+
+![Keep Notes](https://img.shields.io/badge/Next.js-16-black)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)
+![Tailwind CSS](https://img.shields.io/badge/Tailwind-4.0-38bdf8)
+![Prisma](https://img.shields.io/badge/Prisma-7.0-2d3748)
+
+## ✨ Features
+
+- 📝 **Create & Edit Notes**: Quick note creation with expandable input
+- ☑️ **Checklist Support**: Create todo lists with checkable items
+- 🎨 **Color Customization**: 10 beautiful color themes for organizing notes
+- 📌 **Pin Notes**: Keep important notes at the top
+- 📦 **Archive**: Archive notes you want to keep but don't need to see
+- 🏷️ **Labels**: Organize notes with custom labels
+- 🔍 **Real-time Search**: Instantly search through all your notes
+- 🌓 **Dark Mode**: Beautiful dark theme with system preference detection
+- 📱 **Fully Responsive**: Works perfectly on desktop, tablet, and mobile
+- ⚡ **Server Actions**: Lightning-fast CRUD operations with Next.js 16
+- 🎯 **Type-Safe**: Full TypeScript support throughout
+
+## 🚀 Tech Stack
+
+### Frontend
+- **Next.js 16** - React framework with App Router
+- **TypeScript** - Type safety and better DX
+- **Tailwind CSS 4** - Utility-first CSS framework
+- **shadcn/ui** - Beautiful, accessible UI components
+- **Lucide React** - Modern icon library
+
+### Backend
+- **Next.js Server Actions** - Server-side mutations
+- **Prisma ORM** - Type-safe database client
+- **SQLite** - Lightweight database (easily switchable to PostgreSQL)
+
+## 📦 Installation
+
+### Prerequisites
+- Node.js 18+ 
+- npm or yarn
+
+### Steps
+
+1. **Clone the repository**
+   ```bash
+   git clone <repository-url>
+   cd keep-notes
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+3. **Set up the database**
+   ```bash
+   npx prisma generate
+   npx prisma migrate dev
+   ```
+
+4. **Start the development server**
+   ```bash
+   npm run dev
+   ```
+
+5. **Open your browser**
+   Navigate to [http://localhost:3000](http://localhost:3000)
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

keep-notes/app/actions/notes.ts

@@ -0,0 +1,235 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import prisma from '@/lib/prisma'
+import { Note, CheckItem } from '@/lib/types'
+
+// Helper function to parse JSON strings from database
+function parseNote(dbNote: any): Note {
+  return {
+    ...dbNote,
+    checkItems: dbNote.checkItems ? JSON.parse(dbNote.checkItems) : null,
+    labels: dbNote.labels ? JSON.parse(dbNote.labels) : null,
+    images: dbNote.images ? JSON.parse(dbNote.images) : null,
+  }
+}
+
+// Get all notes (non-archived by default)
+export async function getNotes(includeArchived = false) {
+  try {
+    const notes = await prisma.note.findMany({
+      where: includeArchived ? {} : { isArchived: false },
+      orderBy: [
+        { isPinned: 'desc' },
+        { updatedAt: 'desc' }
+      ]
+    })
+
+    return notes.map(parseNote)
+  } catch (error) {
+    console.error('Error fetching notes:', error)
+    return []
+  }
+}
+
+// Get archived notes only
+export async function getArchivedNotes() {
+  try {
+    const notes = await prisma.note.findMany({
+      where: { isArchived: true },
+      orderBy: { updatedAt: 'desc' }
+    })
+
+    return notes.map(parseNote)
+  } catch (error) {
+    console.error('Error fetching archived notes:', error)
+    return []
+  }
+}
+
+// Search notes
+export async function searchNotes(query: string) {
+  try {
+    if (!query.trim()) {
+      return await getNotes()
+    }
+
+    const notes = await prisma.note.findMany({
+      where: {
+        isArchived: false,
+        OR: [
+          { title: { contains: query, mode: 'insensitive' } },
+          { content: { contains: query, mode: 'insensitive' } }
+        ]
+      },
+      orderBy: [
+        { isPinned: 'desc' },
+        { updatedAt: 'desc' }
+      ]
+    })
+
+    return notes.map(parseNote)
+  } catch (error) {
+    console.error('Error searching notes:', error)
+    return []
+  }
+}
+
+// Create a new note
+export async function createNote(data: {
+  title?: string
+  content: string
+  color?: string
+  type?: 'text' | 'checklist'
+  checkItems?: CheckItem[]
+  labels?: string[]
+  images?: string[]
+  isArchived?: boolean
+}) {
+  try {
+    const note = await prisma.note.create({
+      data: {
+        title: data.title || null,
+        content: data.content,
+        color: data.color || 'default',
+        type: data.type || 'text',
+        checkItems: data.checkItems ? JSON.stringify(data.checkItems) : null,
+        labels: data.labels ? JSON.stringify(data.labels) : null,
+        images: data.images ? JSON.stringify(data.images) : null,
+        isArchived: data.isArchived || false,
+      }
+    })
+
+    revalidatePath('/')
+    return parseNote(note)
+  } catch (error) {
+    console.error('Error creating note:', error)
+    throw new Error('Failed to create note')
+  }
+}
+
+// Update a note
+export async function updateNote(id: string, data: {
+  title?: string | null
+  content?: string
+  color?: string
+  isPinned?: boolean
+  isArchived?: boolean
+  type?: 'text' | 'checklist'
+  checkItems?: CheckItem[] | null
+  labels?: string[] | null
+  images?: string[] | null
+}) {
+  try {
+    // Stringify JSON fields if they exist
+    const updateData: any = { ...data }
+    if ('checkItems' in data) {
+      updateData.checkItems = data.checkItems ? JSON.stringify(data.checkItems) : null
+    }
+    if ('labels' in data) {
+      updateData.labels = data.labels ? JSON.stringify(data.labels) : null
+    }
+    if ('images' in data) {
+      updateData.images = data.images ? JSON.stringify(data.images) : null
+    }
+    updateData.updatedAt = new Date()
+
+    const note = await prisma.note.update({
+      where: { id },
+      data: updateData
+    })
+
+    revalidatePath('/')
+    return parseNote(note)
+  } catch (error) {
+    console.error('Error updating note:', error)
+    throw new Error('Failed to update note')
+  }
+}
+
+// Delete a note
+export async function deleteNote(id: string) {
+  try {
+    await prisma.note.delete({
+      where: { id }
+    })
+
+    revalidatePath('/')
+    return { success: true }
+  } catch (error) {
+    console.error('Error deleting note:', error)
+    throw new Error('Failed to delete note')
+  }
+}
+
+// Toggle pin status
+export async function togglePin(id: string, isPinned: boolean) {
+  return updateNote(id, { isPinned })
+}
+
+// Toggle archive status
+export async function toggleArchive(id: string, isArchived: boolean) {
+  return updateNote(id, { isArchived })
+}
+
+// Update note color
+export async function updateColor(id: string, color: string) {
+  return updateNote(id, { color })
+}
+
+// Update note labels
+export async function updateLabels(id: string, labels: string[]) {
+  return updateNote(id, { labels })
+}
+
+// Get all unique labels
+export async function getAllLabels() {
+  try {
+    const notes = await prisma.note.findMany({
+      select: { labels: true }
+    })
+
+    const labelsSet = new Set<string>()
+    notes.forEach(note => {
+      const labels = note.labels ? JSON.parse(note.labels) : null
+      if (labels) {
+        labels.forEach((label: string) => labelsSet.add(label))
+      }
+    })
+
+    return Array.from(labelsSet).sort()
+  } catch (error) {
+    console.error('Error fetching labels:', error)
+    return []
+  }
+}
+
+// Reorder notes (drag and drop)
+export async function reorderNotes(draggedId: string, targetId: string) {
+  try {
+    const draggedNote = await prisma.note.findUnique({ where: { id: draggedId } })
+    const targetNote = await prisma.note.findUnique({ where: { id: targetId } })
+    
+    if (!draggedNote || !targetNote) {
+      throw new Error('Notes not found')
+    }
+
+    // Swap the order values
+    await prisma.$transaction([
+      prisma.note.update({
+        where: { id: draggedId },
+        data: { order: targetNote.order }
+      }),
+      prisma.note.update({
+        where: { id: targetId },
+        data: { order: draggedNote.order }
+      })
+    ])
+
+    revalidatePath('/')
+    return { success: true }
+  } catch (error) {
+    console.error('Error reordering notes:', error)
+    throw new Error('Failed to reorder notes')
+  }
+}

keep-notes/app/api/labels/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server'
+import prisma from '@/lib/prisma'
+
+// GET /api/labels - Get all unique labels
+export async function GET(request: NextRequest) {
+  try {
+    const notes = await prisma.note.findMany({
+      select: { labels: true }
+    })
+
+    const labelsSet = new Set<string>()
+    notes.forEach(note => {
+      const labels = note.labels ? JSON.parse(note.labels) : null
+      if (labels) {
+        labels.forEach((label: string) => labelsSet.add(label))
+      }
+    })
+
+    return NextResponse.json({
+      success: true,
+      data: Array.from(labelsSet).sort()
+    })
+  } catch (error) {
+    console.error('GET /api/labels error:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to fetch labels' },
+      { status: 500 }
+    )
+  }
+}

keep-notes/app/api/notes/[id]/route.ts

@@ -0,0 +1,100 @@
+import { NextRequest, NextResponse } from 'next/server'
+import prisma from '@/lib/prisma'
+
+// Helper to parse JSON fields
+function parseNote(dbNote: any) {
+  return {
+    ...dbNote,
+    checkItems: dbNote.checkItems ? JSON.parse(dbNote.checkItems) : null,
+    labels: dbNote.labels ? JSON.parse(dbNote.labels) : null,
+  }
+}
+
+// GET /api/notes/[id] - Get a single note
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const note = await prisma.note.findUnique({
+      where: { id: params.id }
+    })
+
+    if (!note) {
+      return NextResponse.json(
+        { success: false, error: 'Note not found' },
+        { status: 404 }
+      )
+    }
+
+    return NextResponse.json({
+      success: true,
+      data: parseNote(note)
+    })
+  } catch (error) {
+    console.error('GET /api/notes/[id] error:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to fetch note' },
+      { status: 500 }
+    )
+  }
+}
+
+// PUT /api/notes/[id] - Update a note
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const body = await request.json()
+    const updateData: any = { ...body }
+
+    // Stringify JSON fields if they exist
+    if ('checkItems' in body) {
+      updateData.checkItems = body.checkItems ? JSON.stringify(body.checkItems) : null
+    }
+    if ('labels' in body) {
+      updateData.labels = body.labels ? JSON.stringify(body.labels) : null
+    }
+    updateData.updatedAt = new Date()
+
+    const note = await prisma.note.update({
+      where: { id: params.id },
+      data: updateData
+    })
+
+    return NextResponse.json({
+      success: true,
+      data: parseNote(note)
+    })
+  } catch (error) {
+    console.error('PUT /api/notes/[id] error:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to update note' },
+      { status: 500 }
+    )
+  }
+}
+
+// DELETE /api/notes/[id] - Delete a note
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    await prisma.note.delete({
+      where: { id: params.id }
+    })
+
+    return NextResponse.json({
+      success: true,
+      message: 'Note deleted successfully'
+    })
+  } catch (error) {
+    console.error('DELETE /api/notes/[id] error:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to delete note' },
+      { status: 500 }
+    )
+  }
+}

keep-notes/app/api/notes/route.ts

@@ -0,0 +1,166 @@
+import { NextRequest, NextResponse } from 'next/server'
+import prisma from '@/lib/prisma'
+import { CheckItem } from '@/lib/types'
+
+// Helper to parse JSON fields
+function parseNote(dbNote: any) {
+  return {
+    ...dbNote,
+    checkItems: dbNote.checkItems ? JSON.parse(dbNote.checkItems) : null,
+    labels: dbNote.labels ? JSON.parse(dbNote.labels) : null,
+    images: dbNote.images ? JSON.parse(dbNote.images) : null,
+  }
+}
+
+// GET /api/notes - Get all notes
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const includeArchived = searchParams.get('archived') === 'true'
+    const search = searchParams.get('search')
+
+    let where: any = {}
+    
+    if (!includeArchived) {
+      where.isArchived = false
+    }
+
+    if (search) {
+      where.OR = [
+        { title: { contains: search, mode: 'insensitive' } },
+        { content: { contains: search, mode: 'insensitive' } }
+      ]
+    }
+
+    const notes = await prisma.note.findMany({
+      where,
+      orderBy: [
+        { isPinned: 'desc' },
+        { order: 'asc' },
+        { updatedAt: 'desc' }
+      ]
+    })
+
+    return NextResponse.json({
+      success: true,
+      data: notes.map(parseNote)
+    })
+  } catch (error) {
+    console.error('GET /api/notes error:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to fetch notes' },
+      { status: 500 }
+    )
+  }
+}
+
+// POST /api/notes - Create a new note
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { title, content, color, type, checkItems, labels, images } = body
+
+    if (!content && type !== 'checklist') {
+      return NextResponse.json(
+        { success: false, error: 'Content is required' },
+        { status: 400 }
+      )
+    }
+
+    const note = await prisma.note.create({
+      data: {
+        title: title || null,
+        content: content || '',
+        color: color || 'default',
+        type: type || 'text',
+        checkItems: checkItems ? JSON.stringify(checkItems) : null,
+        labels: labels ? JSON.stringify(labels) : null,
+        images: images ? JSON.stringify(images) : null,
+      }
+    })
+
+    return NextResponse.json({
+      success: true,
+      data: parseNote(note)
+    }, { status: 201 })
+  } catch (error) {
+    console.error('POST /api/notes error:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to create note' },
+      { status: 500 }
+    )
+  }
+}
+
+// PUT /api/notes - Update an existing note
+export async function PUT(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { id, title, content, color, type, checkItems, labels, isPinned, isArchived, images } = body
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: 'Note ID is required' },
+        { status: 400 }
+      )
+    }
+
+    const updateData: any = {}
+    
+    if (title !== undefined) updateData.title = title
+    if (content !== undefined) updateData.content = content
+    if (color !== undefined) updateData.color = color
+    if (type !== undefined) updateData.type = type
+    if (checkItems !== undefined) updateData.checkItems = checkItems ? JSON.stringify(checkItems) : null
+    if (labels !== undefined) updateData.labels = labels ? JSON.stringify(labels) : null
+    if (isPinned !== undefined) updateData.isPinned = isPinned
+    if (isArchived !== undefined) updateData.isArchived = isArchived
+    if (images !== undefined) updateData.images = images ? JSON.stringify(images) : null
+
+    const note = await prisma.note.update({
+      where: { id },
+      data: updateData
+    })
+
+    return NextResponse.json({
+      success: true,
+      data: parseNote(note)
+    })
+  } catch (error) {
+    console.error('PUT /api/notes error:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to update note' },
+      { status: 500 }
+    )
+  }
+}
+
+// DELETE /api/notes?id=xxx - Delete a note
+export async function DELETE(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const id = searchParams.get('id')
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: 'Note ID is required' },
+        { status: 400 }
+      )
+    }
+
+    await prisma.note.delete({
+      where: { id }
+    })
+
+    return NextResponse.json({
+      success: true,
+      message: 'Note deleted successfully'
+    })
+  } catch (error) {
+    console.error('DELETE /api/notes error:', error)
+    return NextResponse.json(
+      { success: false, error: 'Failed to delete note' },
+      { status: 500 }
+    )
+  }
+}

keep-notes/app/archive/page.tsx

@@ -0,0 +1,15 @@
+import { getArchivedNotes } from '@/app/actions/notes'
+import { NoteGrid } from '@/components/note-grid'
+
+export const dynamic = 'force-dynamic'
+
+export default async function ArchivePage() {
+  const notes = await getArchivedNotes()
+
+  return (
+    <main className="container mx-auto px-4 py-8 max-w-7xl">
+      <h1 className="text-3xl font-bold mb-8">Archive</h1>
+      <NoteGrid notes={notes} />
+    </main>
+  )
+}

keep-notes/app/globals.css

@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

keep-notes/app/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Header } from "@/components/header";
+
+const inter = Inter({
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Memento - Your Digital Notepad",
+  description: "A beautiful note-taking app inspired by Google Keep, built with Next.js 16",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <Header />
+        {children}
+      </body>
+    </html>
+  );
+}

keep-notes/app/page.tsx

@@ -0,0 +1,23 @@
+import { getNotes, searchNotes } from '@/app/actions/notes'
+import { NoteInput } from '@/components/note-input'
+import { NoteGrid } from '@/components/note-grid'
+
+export const dynamic = 'force-dynamic'
+
+export default async function HomePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ search?: string }>
+}) {
+  const params = await searchParams
+  const notes = params.search
+    ? await searchNotes(params.search)
+    : await getNotes()
+
+  return (
+    <main className="container mx-auto px-4 py-8 max-w-7xl">
+      <NoteInput />
+      <NoteGrid notes={notes} />
+    </main>
+  )
+}

keep-notes/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

keep-notes/components/header.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Menu, Search, Archive, StickyNote, Tag, Moon, Sun } from 'lucide-react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { searchNotes } from '@/app/actions/notes'
+import { useRouter } from 'next/navigation'
+
+export function Header() {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [isSearching, setIsSearching] = useState(false)
+  const [theme, setTheme] = useState<'light' | 'dark'>('light')
+  const pathname = usePathname()
+  const router = useRouter()
+
+  useEffect(() => {
+    // Check for saved theme or system preference
+    const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    const initialTheme = savedTheme || systemTheme
+
+    setTheme(initialTheme)
+    document.documentElement.classList.toggle('dark', initialTheme === 'dark')
+  }, [])
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light'
+    setTheme(newTheme)
+    localStorage.setItem('theme', newTheme)
+    document.documentElement.classList.toggle('dark', newTheme === 'dark')
+  }
+
+  const handleSearch = async (query: string) => {
+    setSearchQuery(query)
+    if (query.trim()) {
+      setIsSearching(true)
+      // Search functionality will be handled by the parent component
+      // For now, we'll just update the URL
+      router.push(`/?search=${encodeURIComponent(query)}`)
+      setIsSearching(false)
+    } else {
+      router.push('/')
+    }
+  }
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center px-4 gap-4">
+        {/* Mobile Menu */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="md:hidden">
+              <Menu className="h-5 w-5" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-48">
+            <DropdownMenuItem asChild>
+              <Link href="/" className="flex items-center">
+                <StickyNote className="h-4 w-4 mr-2" />
+                Notes
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <Link href="/archive" className="flex items-center">
+                <Archive className="h-4 w-4 mr-2" />
+                Archive
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2">
+          <StickyNote className="h-6 w-6 text-yellow-500" />
+          <span className="font-semibold text-xl hidden sm:inline-block">Memento</span>
+        </Link>
+
+        {/* Search Bar */}
+        <div className="flex-1 max-w-2xl">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="Search notes..."
+              className="pl-10"
+              value={searchQuery}
+              onChange={(e) => handleSearch(e.target.value)}
+            />
+          </div>
+        </div>
+
+        {/* Theme Toggle */}
+        <Button variant="ghost" size="sm" onClick={toggleTheme}>
+          {theme === 'light' ? (
+            <Moon className="h-5 w-5" />
+          ) : (
+            <Sun className="h-5 w-5" />
+          )}
+        </Button>
+      </div>
+
+      {/* Desktop Navigation */}
+      <nav className="hidden md:flex border-t">
+        <Link
+          href="/"
+          className={cn(
+            'flex items-center gap-2 px-6 py-3 text-sm font-medium transition-colors hover:bg-accent',
+            pathname === '/' && 'bg-accent'
+          )}
+        >
+          <StickyNote className="h-4 w-4" />
+          Notes
+        </Link>
+        <Link
+          href="/archive"
+          className={cn(
+            'flex items-center gap-2 px-6 py-3 text-sm font-medium transition-colors hover:bg-accent',
+            pathname === '/archive' && 'bg-accent'
+          )}
+        >
+          <Archive className="h-4 w-4" />
+          Archive
+        </Link>
+      </nav>
+    </header>
+  )
+}

keep-notes/components/note-card.tsx

@@ -0,0 +1,292 @@
+'use client'
+
+import { Note, NOTE_COLORS, NoteColor } from '@/lib/types'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Badge } from '@/components/ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  Archive,
+  ArchiveRestore,
+  MoreVertical,
+  Palette,
+  Pin,
+  Tag,
+  Trash2,
+} from 'lucide-react'
+import { useState } from 'react'
+import { deleteNote, toggleArchive, togglePin, updateColor, updateNote } from '@/app/actions/notes'
+import { cn } from '@/lib/utils'
+
+interface NoteCardProps {
+  note: Note
+  onEdit?: (note: Note) => void
+  onDragStart?: (note: Note) => void
+  onDragEnd?: () => void
+  onDragOver?: (note: Note) => void
+  isDragging?: boolean
+}
+
+export function NoteCard({ note, onEdit, onDragStart, onDragEnd, onDragOver, isDragging }: NoteCardProps) {
+  const [isDeleting, setIsDeleting] = useState(false)
+  const colorClasses = NOTE_COLORS[note.color as NoteColor] || NOTE_COLORS.default
+
+  const handleDelete = async () => {
+    if (confirm('Are you sure you want to delete this note?')) {
+      setIsDeleting(true)
+      try {
+        await deleteNote(note.id)
+      } catch (error) {
+        console.error('Failed to delete note:', error)
+        setIsDeleting(false)
+      }
+    }
+  }
+
+  const handleTogglePin = async () => {
+    await togglePin(note.id, !note.isPinned)
+  }
+
+  const handleToggleArchive = async () => {
+    await toggleArchive(note.id, !note.isArchived)
+  }
+
+  const handleColorChange = async (color: string) => {
+    await updateColor(note.id, color)
+  }
+
+  const handleCheckItem = async (checkItemId: string) => {
+    if (note.type === 'checklist' && note.checkItems) {
+      const updatedItems = note.checkItems.map(item =>
+        item.id === checkItemId ? { ...item, checked: !item.checked } : item
+      )
+      await updateNote(note.id, { checkItems: updatedItems })
+    }
+  }
+
+  if (isDeleting) return null
+
+  return (
+    <Card
+      draggable
+      onDragStart={(e) => {
+        e.stopPropagation()
+        onDragStart?.(note)
+      }}
+      onDragEnd={onDragEnd}
+      onDragOver={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        onDragOver?.(note)
+      }}
+      className={cn(
+        'group relative p-4 transition-all duration-200 border',
+        'cursor-move hover:shadow-md',
+        colorClasses.card,
+        isDragging && 'opacity-30 scale-95'
+      )}
+      onClick={(e) => {
+        // Only trigger edit if not clicking on buttons
+        const target = e.target as HTMLElement
+        if (!target.closest('button') && !target.closest('[role="checkbox"]')) {
+          onEdit?.(note)
+        }
+      }}
+    >
+      {/* Pin Icon */}
+      {note.isPinned && (
+        <Pin className="absolute top-3 right-3 h-4 w-4 text-gray-600 dark:text-gray-400" fill="currentColor" />
+      )}
+
+      {/* Title */}
+      {note.title && (
+        <h3 className="text-base font-medium mb-2 pr-6 text-gray-900 dark:text-gray-100">
+          {note.title}
+        </h3>
+      )}
+
+      {/* Images */}
+      {note.images && note.images.length > 0 && (
+        <div className={cn(
+          "mb-3 -mx-4",
+          !note.title && "-mt-4"
+        )}>
+          {note.images.length === 1 ? (
+            <img 
+              src={note.images[0]} 
+              alt="" 
+              className="w-full h-auto rounded-lg"
+            />
+          ) : note.images.length === 2 ? (
+            <div className="grid grid-cols-2 gap-2 px-4">
+              {note.images.map((img, idx) => (
+                <img 
+                  key={idx}
+                  src={img} 
+                  alt="" 
+                  className="w-full h-auto rounded-lg"
+                />
+              ))}
+            </div>
+          ) : note.images.length === 3 ? (
+            <div className="grid grid-cols-2 gap-2 px-4">
+              <img 
+                src={note.images[0]} 
+                alt="" 
+                className="col-span-2 w-full h-auto rounded-lg"
+              />
+              {note.images.slice(1).map((img, idx) => (
+                <img 
+                  key={idx}
+                  src={img} 
+                  alt="" 
+                  className="w-full h-auto rounded-lg"
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 gap-2 px-4">
+              {note.images.slice(0, 4).map((img, idx) => (
+                <img 
+                  key={idx}
+                  src={img} 
+                  alt="" 
+                  className="w-full h-auto rounded-lg"
+                />
+              ))}
+              {note.images.length > 4 && (
+                <div className="absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-xs">
+                  +{note.images.length - 4}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Content */}
+      {note.type === 'text' ? (
+        <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap line-clamp-10">
+          {note.content}
+        </p>
+      ) : (
+        <div className="space-y-1">
+          {note.checkItems?.map((item) => (
+            <div
+              key={item.id}
+              className="flex items-start gap-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleCheckItem(item.id)
+              }}
+            >
+              <Checkbox
+                checked={item.checked}
+                className="mt-0.5"
+              />
+              <span
+                className={cn(
+                  'text-sm',
+                  item.checked
+                    ? 'line-through text-gray-500 dark:text-gray-500'
+                    : 'text-gray-700 dark:text-gray-300'
+                )}
+              >
+                {item.text}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Labels */}
+      {note.labels && note.labels.length > 0 && (
+        <div className="flex flex-wrap gap-1 mt-3">
+          {note.labels.map((label) => (
+            <Badge key={label} variant="secondary" className="text-xs">
+              {label}
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {/* Action Bar - Shows on Hover */}
+      <div
+        className="absolute bottom-0 left-0 right-0 p-2 flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Pin Button */}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={handleTogglePin}
+          title={note.isPinned ? 'Unpin' : 'Pin'}
+        >
+          <Pin className={cn('h-4 w-4', note.isPinned && 'fill-current')} />
+        </Button>
+
+        {/* Color Palette */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0" title="Change color">
+              <Palette className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <div className="grid grid-cols-5 gap-2 p-2">
+              {Object.entries(NOTE_COLORS).map(([colorName, classes]) => (
+                <button
+                  key={colorName}
+                  className={cn(
+                    'h-8 w-8 rounded-full border-2 transition-transform hover:scale-110',
+                    classes.bg,
+                    note.color === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-gray-300 dark:border-gray-700'
+                  )}
+                  onClick={() => handleColorChange(colorName)}
+                  title={colorName}
+                />
+              ))}
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* More Options */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={handleToggleArchive}>
+              {note.isArchived ? (
+                <>
+                  <ArchiveRestore className="h-4 w-4 mr-2" />
+                  Unarchive
+                </>
+              ) : (
+                <>
+                  <Archive className="h-4 w-4 mr-2" />
+                  Archive
+                </>
+              )}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleDelete} className="text-red-600 dark:text-red-400">
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </Card>
+  )
+}

keep-notes/components/note-editor.tsx

@@ -0,0 +1,308 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { Note, CheckItem, NOTE_COLORS, NoteColor } from '@/lib/types'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Badge } from '@/components/ui/badge'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { X, Plus, Palette, Tag, Image as ImageIcon } from 'lucide-react'
+import { updateNote } from '@/app/actions/notes'
+import { cn } from '@/lib/utils'
+
+interface NoteEditorProps {
+  note: Note
+  onClose: () => void
+}
+
+export function NoteEditor({ note, onClose }: NoteEditorProps) {
+  const [title, setTitle] = useState(note.title || '')
+  const [content, setContent] = useState(note.content)
+  const [checkItems, setCheckItems] = useState<CheckItem[]>(note.checkItems || [])
+  const [labels, setLabels] = useState<string[]>(note.labels || [])
+  const [images, setImages] = useState<string[]>(note.images || [])
+  const [newLabel, setNewLabel] = useState('')
+  const [color, setColor] = useState(note.color)
+  const [isSaving, setIsSaving] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const colorClasses = NOTE_COLORS[color as NoteColor] || NOTE_COLORS.default
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (!files) return
+
+    Array.from(files).forEach(file => {
+      const reader = new FileReader()
+      reader.onloadend = () => {
+        setImages(prev => [...prev, reader.result as string])
+      }
+      reader.readAsDataURL(file)
+    })
+  }
+
+  const handleRemoveImage = (index: number) => {
+    setImages(images.filter((_, i) => i !== index))
+  }
+
+  const handleSave = async () => {
+    setIsSaving(true)
+    try {
+      await updateNote(note.id, {
+        title: title.trim() || null,
+        content: note.type === 'text' ? content : '',
+        checkItems: note.type === 'checklist' ? checkItems : null,
+        labels,
+        images,
+        color,
+      })
+      onClose()
+    } catch (error) {
+      console.error('Failed to save note:', error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleCheckItem = (id: string) => {
+    setCheckItems(items =>
+      items.map(item =>
+        item.id === id ? { ...item, checked: !item.checked } : item
+      )
+    )
+  }
+
+  const handleUpdateCheckItem = (id: string, text: string) => {
+    setCheckItems(items =>
+      items.map(item => (item.id === id ? { ...item, text } : item))
+    )
+  }
+
+  const handleAddCheckItem = () => {
+    setCheckItems([
+      ...checkItems,
+      { id: Date.now().toString(), text: '', checked: false },
+    ])
+  }
+
+  const handleRemoveCheckItem = (id: string) => {
+    setCheckItems(items => items.filter(item => item.id !== id))
+  }
+
+  const handleAddLabel = () => {
+    if (newLabel.trim() && !labels.includes(newLabel.trim())) {
+      setLabels([...labels, newLabel.trim()])
+      setNewLabel('')
+    }
+  }
+
+  const handleRemoveLabel = (label: string) => {
+    setLabels(labels.filter(l => l !== label))
+  }
+
+  return (
+    <Dialog open onOpenChange={onClose}>
+      <DialogContent
+        className={cn(
+          '!max-w-[min(95vw,1600px)] max-h-[90vh] overflow-y-auto',
+          colorClasses.bg
+        )}
+      >
+        <DialogHeader>
+          <DialogTitle className="sr-only">Edit Note</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Title */}
+          <Input
+            placeholder="Title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="text-lg font-semibold border-0 focus-visible:ring-0 px-0 bg-transparent"
+          />
+
+          {/* Images */}
+          {images.length > 0 && (
+            <div className="flex flex-col gap-3 mb-4">
+              {images.map((img, idx) => (
+                <div key={idx} className="relative group">
+                  <img 
+                    src={img} 
+                    alt="" 
+                    className="h-auto rounded-lg"
+                  />
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="absolute top-2 right-2 h-7 w-7 p-0 bg-white/90 hover:bg-white opacity-0 group-hover:opacity-100 transition-opacity"
+                    onClick={() => handleRemoveImage(idx)}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Content or Checklist */}
+          {note.type === 'text' ? (
+            <Textarea
+              placeholder="Take a note..."
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              className="min-h-[200px] border-0 focus-visible:ring-0 px-0 bg-transparent resize-none"
+            />
+          ) : (
+            <div className="space-y-2">
+              {checkItems.map((item) => (
+                <div key={item.id} className="flex items-start gap-2 group">
+                  <Checkbox
+                    checked={item.checked}
+                    onCheckedChange={() => handleCheckItem(item.id)}
+                    className="mt-2"
+                  />
+                  <Input
+                    value={item.text}
+                    onChange={(e) => handleUpdateCheckItem(item.id, e.target.value)}
+                    placeholder="List item"
+                    className="flex-1 border-0 focus-visible:ring-0 px-0 bg-transparent"
+                  />
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="opacity-0 group-hover:opacity-100 h-8 w-8 p-0"
+                    onClick={() => handleRemoveCheckItem(item.id)}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleAddCheckItem}
+                className="text-gray-600 dark:text-gray-400"
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                Add item
+              </Button>
+            </div>
+          )}
+
+          {/* Labels */}
+          {labels.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {labels.map((label) => (
+                <Badge key={label} variant="secondary" className="gap-1">
+                  {label}
+                  <button
+                    onClick={() => handleRemoveLabel(label)}
+                    className="hover:text-red-600"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </Badge>
+              ))}
+            </div>
+          )}
+
+          {/* Toolbar */}
+          <div className="flex items-center justify-between pt-4 border-t">
+            <div className="flex items-center gap-2">
+              {/* Add Image Button */}
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                onClick={() => fileInputRef.current?.click()}
+                title="Add image"
+              >
+                <ImageIcon className="h-4 w-4" />
+              </Button>
+
+              {/* Color Picker */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="sm" title="Change color">
+                    <Palette className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <div className="grid grid-cols-5 gap-2 p-2">
+                    {Object.entries(NOTE_COLORS).map(([colorName, classes]) => (
+                      <button
+                        key={colorName}
+                        className={cn(
+                          'h-8 w-8 rounded-full border-2 transition-transform hover:scale-110',
+                          classes.bg,
+                          color === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-gray-300 dark:border-gray-700'
+                        )}
+                        onClick={() => setColor(colorName)}
+                        title={colorName}
+                      />
+                    ))}
+                  </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              {/* Label Manager */}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="sm" title="Add label">
+                    <Tag className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-64">
+                  <div className="p-2 space-y-2">
+                    <Input
+                      placeholder="Enter label name"
+                      value={newLabel}
+                      onChange={(e) => setNewLabel(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          e.preventDefault()
+                          handleAddLabel()
+                        }
+                      }}
+                    />
+                    <Button size="sm" onClick={handleAddLabel} className="w-full">
+                      Add Label
+                    </Button>
+                  </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+
+            <div className="flex gap-2">
+              <Button variant="ghost" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button onClick={handleSave} disabled={isSaving}>
+                {isSaving ? 'Saving...' : 'Save'}
+              </Button>
+            </div>
+          </div>
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          className="hidden"
+          onChange={handleImageUpload}
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}

keep-notes/components/note-grid.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { Note } from '@/lib/types'
+import { NoteCard } from './note-card'
+import { useState } from 'react'
+import { NoteEditor } from './note-editor'
+import { reorderNotes } from '@/app/actions/notes'
+
+interface NoteGridProps {
+  notes: Note[]
+}
+
+export function NoteGrid({ notes }: NoteGridProps) {
+  const [editingNote, setEditingNote] = useState<Note | null>(null)
+  const [draggedNote, setDraggedNote] = useState<Note | null>(null)
+  const [dragOverNote, setDragOverNote] = useState<Note | null>(null)
+
+  const pinnedNotes = notes.filter(note => note.isPinned).sort((a, b) => a.order - b.order)
+  const unpinnedNotes = notes.filter(note => !note.isPinned).sort((a, b) => a.order - b.order)
+
+  const handleDragStart = (note: Note) => {
+    setDraggedNote(note)
+  }
+
+  const handleDragEnd = async () => {
+    if (draggedNote && dragOverNote && draggedNote.id !== dragOverNote.id) {
+      // Reorder notes
+      const sourceIndex = notes.findIndex(n => n.id === draggedNote.id)
+      const targetIndex = notes.findIndex(n => n.id === dragOverNote.id)
+      
+      await reorderNotes(draggedNote.id, dragOverNote.id)
+    }
+    setDraggedNote(null)
+    setDragOverNote(null)
+  }
+
+  const handleDragOver = (note: Note) => {
+    if (draggedNote && draggedNote.id !== note.id) {
+      setDragOverNote(note)
+    }
+  }
+
+  return (
+    <>
+      <div className="space-y-8">
+        {pinnedNotes.length > 0 && (
+          <div>
+            <h2 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3 px-2">
+              Pinned
+            </h2>
+            <div className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 gap-4 space-y-4">
+              {pinnedNotes.map(note => (
+                <div key={note.id} className="break-inside-avoid mb-4">
+                  <NoteCard 
+                    note={note} 
+                    onEdit={setEditingNote}
+                    onDragStart={handleDragStart}
+                    onDragEnd={handleDragEnd}
+                    onDragOver={handleDragOver}
+                    isDragging={draggedNote?.id === note.id}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {unpinnedNotes.length > 0 && (
+          <div>
+            {pinnedNotes.length > 0 && (
+              <h2 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3 px-2">
+                Others
+              </h2>
+            )}
+            <div className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 gap-4 space-y-4">
+              {unpinnedNotes.map(note => (
+                <div key={note.id} className="break-inside-avoid mb-4">
+                  <NoteCard 
+                    note={note} 
+                    onEdit={setEditingNote}
+                    onDragStart={handleDragStart}
+                    onDragEnd={handleDragEnd}
+                    onDragOver={handleDragOver}
+                    isDragging={draggedNote?.id === note.id}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {notes.length === 0 && (
+          <div className="text-center py-16">
+            <p className="text-gray-500 dark:text-gray-400 text-lg">No notes yet</p>
+            <p className="text-gray-400 dark:text-gray-500 text-sm mt-2">Create your first note to get started</p>
+          </div>
+        )}
+      </div>
+
+      {editingNote && (
+        <NoteEditor
+          note={editingNote}
+          onClose={() => setEditingNote(null)}
+        />
+      )}
+    </>
+  )
+}

keep-notes/components/note-input.tsx

@@ -69,12 +69,36 @@ export function NoteInput() {
   const { title, content, checkItems, images } = noteState
 
   // Debounced state updates for performance
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
+
   const updateTitle = (newTitle: string) => {
+    // Clear previous timer
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current)
+    }
+
+    // Update immediately for UI
     setNoteState(prev => ({ ...prev, title: newTitle }))
+
+    // Debounce history update
+    debounceTimerRef.current = setTimeout(() => {
+      setNoteState(prev => ({ ...prev, title: newTitle }))
+    }, 500)
   }
 
   const updateContent = (newContent: string) => {
+    // Clear previous timer
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current)
+    }
+
+    // Update immediately for UI
     setNoteState(prev => ({ ...prev, content: newContent }))
+
+    // Debounce history update
+    debounceTimerRef.current = setTimeout(() => {
+      setNoteState(prev => ({ ...prev, content: newContent }))
+    }, 500)
   }
 
   const updateCheckItems = (newCheckItems: CheckItem[]) => {
@@ -85,6 +109,15 @@ export function NoteInput() {
     setNoteState(prev => ({ ...prev, images: newImages }))
   }
 
+  // Cleanup debounce timer
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current)
+      }
+    }
+  }, [])
+
   // Keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {

keep-notes/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

keep-notes/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

keep-notes/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

keep-notes/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

keep-notes/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

keep-notes/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

keep-notes/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

keep-notes/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

keep-notes/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

keep-notes/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

keep-notes/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

keep-notes/lib/prisma.ts

@@ -0,0 +1,15 @@
+import { PrismaClient } from '@prisma/client'
+
+const prismaClientSingleton = () => {
+  return new PrismaClient()
+}
+
+declare const globalThis: {
+  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
+} & typeof global;
+
+const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
+
+export default prisma
+
+if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma

keep-notes/lib/types.ts

@@ -0,0 +1,75 @@
+export interface CheckItem {
+  id: string;
+  text: string;
+  checked: boolean;
+}
+
+export interface Note {
+  id: string;
+  title: string | null;
+  content: string;
+  color: string;
+  isPinned: boolean;
+  isArchived: boolean;
+  type: 'text' | 'checklist';
+  checkItems: CheckItem[] | null;
+  labels: string[] | null;
+  images: string[] | null;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export const NOTE_COLORS = {
+  default: { 
+    bg: 'bg-white dark:bg-zinc-900', 
+    hover: 'hover:bg-gray-50 dark:hover:bg-zinc-800',
+    card: 'bg-white dark:bg-zinc-900 border-gray-200 dark:border-zinc-700'
+  },
+  red: { 
+    bg: 'bg-red-50 dark:bg-red-950/30', 
+    hover: 'hover:bg-red-100 dark:hover:bg-red-950/50',
+    card: 'bg-red-50 dark:bg-red-950/30 border-red-100 dark:border-red-900/50'
+  },
+  orange: { 
+    bg: 'bg-orange-50 dark:bg-orange-950/30', 
+    hover: 'hover:bg-orange-100 dark:hover:bg-orange-950/50',
+    card: 'bg-orange-50 dark:bg-orange-950/30 border-orange-100 dark:border-orange-900/50'
+  },
+  yellow: { 
+    bg: 'bg-yellow-50 dark:bg-yellow-950/30', 
+    hover: 'hover:bg-yellow-100 dark:hover:bg-yellow-950/50',
+    card: 'bg-yellow-50 dark:bg-yellow-950/30 border-yellow-100 dark:border-yellow-900/50'
+  },
+  green: { 
+    bg: 'bg-green-50 dark:bg-green-950/30', 
+    hover: 'hover:bg-green-100 dark:hover:bg-green-950/50',
+    card: 'bg-green-50 dark:bg-green-950/30 border-green-100 dark:border-green-900/50'
+  },
+  teal: { 
+    bg: 'bg-teal-50 dark:bg-teal-950/30', 
+    hover: 'hover:bg-teal-100 dark:hover:bg-teal-950/50',
+    card: 'bg-teal-50 dark:bg-teal-950/30 border-teal-100 dark:border-teal-900/50'
+  },
+  blue: { 
+    bg: 'bg-blue-50 dark:bg-blue-950/30', 
+    hover: 'hover:bg-blue-100 dark:hover:bg-blue-950/50',
+    card: 'bg-blue-50 dark:bg-blue-950/30 border-blue-100 dark:border-blue-900/50'
+  },
+  purple: { 
+    bg: 'bg-purple-50 dark:bg-purple-950/30', 
+    hover: 'hover:bg-purple-100 dark:hover:bg-purple-950/50',
+    card: 'bg-purple-50 dark:bg-purple-950/30 border-purple-100 dark:border-purple-900/50'
+  },
+  pink: { 
+    bg: 'bg-pink-50 dark:bg-pink-950/30', 
+    hover: 'hover:bg-pink-100 dark:hover:bg-pink-950/50',
+    card: 'bg-pink-50 dark:bg-pink-950/30 border-pink-100 dark:border-pink-900/50'
+  },
+  gray: { 
+    bg: 'bg-gray-100 dark:bg-gray-800/50', 
+    hover: 'hover:bg-gray-200 dark:hover:bg-gray-700/50',
+    card: 'bg-gray-100 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700'
+  },
+} as const;
+
+export type NoteColor = keyof typeof NOTE_COLORS;

keep-notes/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

keep-notes/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

keep-notes/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "memento",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@libsql/client": "^0.15.15",
+    "@prisma/adapter-better-sqlite3": "^7.2.0",
+    "@prisma/adapter-libsql": "^7.2.0",
+    "@prisma/client": "5.22.0",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "better-sqlite3": "^12.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dotenv": "^17.2.3",
+    "lucide-react": "^0.562.0",
+    "next": "16.1.1",
+    "prisma": "5.22.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

keep-notes/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

keep-notes/prisma.config.ts

@@ -0,0 +1,12 @@
+// This file was generated by Prisma, and assumes you have installed the following:
+// npm install --save-dev prisma dotenv
+import "dotenv/config";
+import { defineConfig } from "prisma/config";
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  // Note: datasource.url removed because we use adapter in lib/prisma.ts
+});

keep-notes/prisma/migrations/20260104094125_init/migration.sql

@@ -0,0 +1,20 @@
+-- CreateTable
+CREATE TABLE "Note" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "title" TEXT,
+    "content" TEXT NOT NULL,
+    "color" TEXT NOT NULL DEFAULT 'default',
+    "isPinned" BOOLEAN NOT NULL DEFAULT false,
+    "isArchived" BOOLEAN NOT NULL DEFAULT false,
+    "type" TEXT NOT NULL DEFAULT 'text',
+    "checkItems" JSONB,
+    "labels" JSONB,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);
+
+-- CreateIndex
+CREATE INDEX "Note_isPinned_idx" ON "Note"("isPinned");
+
+-- CreateIndex
+CREATE INDEX "Note_isArchived_idx" ON "Note"("isArchived");

keep-notes/prisma/migrations/20260104102002_init/migration.sql

@@ -0,0 +1,23 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Note" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "title" TEXT,
+    "content" TEXT NOT NULL,
+    "color" TEXT NOT NULL DEFAULT 'default',
+    "isPinned" BOOLEAN NOT NULL DEFAULT false,
+    "isArchived" BOOLEAN NOT NULL DEFAULT false,
+    "type" TEXT NOT NULL DEFAULT 'text',
+    "checkItems" TEXT,
+    "labels" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);
+INSERT INTO "new_Note" ("checkItems", "color", "content", "createdAt", "id", "isArchived", "isPinned", "labels", "title", "type", "updatedAt") SELECT "checkItems", "color", "content", "createdAt", "id", "isArchived", "isPinned", "labels", "title", "type", "updatedAt" FROM "Note";
+DROP TABLE "Note";
+ALTER TABLE "new_Note" RENAME TO "Note";
+CREATE INDEX "Note_isPinned_idx" ON "Note"("isPinned");
+CREATE INDEX "Note_isArchived_idx" ON "Note"("isArchived");
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

keep-notes/prisma/migrations/20260104102801_add_order/migration.sql

@@ -0,0 +1,25 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Note" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "title" TEXT,
+    "content" TEXT NOT NULL,
+    "color" TEXT NOT NULL DEFAULT 'default',
+    "isPinned" BOOLEAN NOT NULL DEFAULT false,
+    "isArchived" BOOLEAN NOT NULL DEFAULT false,
+    "type" TEXT NOT NULL DEFAULT 'text',
+    "checkItems" TEXT,
+    "labels" TEXT,
+    "order" INTEGER NOT NULL DEFAULT 0,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);
+INSERT INTO "new_Note" ("checkItems", "color", "content", "createdAt", "id", "isArchived", "isPinned", "labels", "title", "type", "updatedAt") SELECT "checkItems", "color", "content", "createdAt", "id", "isArchived", "isPinned", "labels", "title", "type", "updatedAt" FROM "Note";
+DROP TABLE "Note";
+ALTER TABLE "new_Note" RENAME TO "Note";
+CREATE INDEX "Note_isPinned_idx" ON "Note"("isPinned");
+CREATE INDEX "Note_isArchived_idx" ON "Note"("isArchived");
+CREATE INDEX "Note_order_idx" ON "Note"("order");
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

keep-notes/prisma/migrations/20260104105155_add_images/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Note" ADD COLUMN "images" TEXT;

keep-notes/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"

keep-notes/prisma/schema.prisma

@@ -0,0 +1,31 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model Note {
+  id          String   @id @default(cuid())
+  title       String?
+  content     String
+  color       String   @default("default")
+  isPinned    Boolean  @default(false)
+  isArchived  Boolean  @default(false)
+  type        String   @default("text") // "text" or "checklist"
+  checkItems  String?  // For checklist items stored as JSON string
+  labels      String?  // Array of label names stored as JSON string
+  images      String?  // Array of image URLs stored as JSON string
+  order       Int      @default(0)
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  @@index([isPinned])
+  @@index([isArchived])
+  @@index([order])
+}

keep-notes/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

keep-notes/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

keep-notes/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

keep-notes/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

keep-notes/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

keep-notes/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}