Core Components

The UI of Plain is organized logically in the src/components/ directory.

Editor

This is the primary rich-text editing surface powered by Tiptap.

Role: Displays the content of the currently selected note.
Features: Handles inline styles, lists, links, tables, and inline image uploads.
Extensions: Custom behavior is managed via src/extensions/PlainImage.jsx and other Tiptap extensions.
Autosave: Automatically triggers store mutations after a debounce when typing.

These components wrap the NoteEditor and provide the surrounding context (e.g., note title, pinning actions, trash status).

Displayed when no note is selected in the sidebar. Provides a clean, empty state with an invitation to create a new note.

The main navigation area on the left side of the screen.

Role: Displays the NoteList, search input, and tag filters.
Responsiveness: Acts as a persistent sidebar on desktop, and a slide-out drawer on mobile devices.

Renders the collection of notes.

Sorting: Pinned notes appear first, followed by notes sorted by updatedAt descending.
Trashing: Trashed notes are sorted by trashedAt descending and visually distinct.

Allows users to filter the NoteList based on text content, titles, or assigned tags.

Manages exporting notes to various formats (e.g., Markdown, PDF).

Location: src/components/export/
Dependencies: Uses html2canvas and jspdf for PDF generation, and turndown for Markdown conversion.

A special modal for redeeming Plain Founders Pack purchases and unlocking founders benefits.