Notes: Persistent Markdown Workspace

The Notes module provides a built-in markdown editor for storing technical prompts, rollout plans, and working specifications without leaving the DevSpeak dashboard. Notes are private to your account and persist across sessions.

Feature Overview

Notes is accessible from the Navigation Panel under the NOTES entry. It renders as a full-width, two-panel layout:

Left panel — Note list with search, metadata previews, and a + NEW button.

Right panel — Markdown editor with three view modes and a management toolbar.

Each note stores a title (extracted from the first # heading or defaulting to "Untitled note"), raw markdown content, and creation/update timestamps that drive the auto-save mechanism.

Empty State and Onboarding

When no notes exist — or no note is selected — the right panel renders an onboarding prompt:

> Start a note

> Keep technical prompts, rollout plans, and working specs in one place without leaving DevSpeak.

A + CREATE NOTE call-to-action creates a new note and opens the editor in Write mode with an empty content buffer.

Editor Modes

The editor toolbar exposes three mutually exclusive view modes, toggled via segmented buttons:

Write Mode

The default editing surface. Renders a full-width </code> (or contenteditable region) with a formatting toolbar that supports:| Toolbar Action | Markdown Shortcut | Description | | :-------------- | :------------------ | :--------------------------------- | | Heading (H1–H3) | <code># </code>, <code>## </code>, <code>### </code> | Insert heading markers at cursor | | Bold | <code>text</code> | Wrap selection in double asterisks | | _Italic_ | <code>*text*</code> | Wrap selection in single asterisks | | Underline | <code>text</code> | HTML underline (non-standard MD) | | Strikethrough | <code>~~text~~</code> | GFM strikethrough | | Blockquote | <code>> </code> | Prefix line with blockquote marker | | Ordered List | <code>1. </code> | Insert numbered list item | | Unordered List | <code>- </code> | Insert bullet list item | | Code Inline | `<code> </code>code<code> </code><code> | Wrap selection in backticks | | Code Block | </code> ``<code> </code> | Insert fenced code block | | Table | <code>\| col \|</code> | Insert GFM table scaffold | | Image | <code>![alt](url)</code> | Insert image markdown | | Link | <code>[text](url)</code> | Insert hyperlink | | Horizontal Rule | <code>---</code> | Insert thematic break |The status bar below the toolbar displays the current save state — one of <code>SAVED</code>, <code>SYNCING</code>, or <code>UNSAVED</code> — driven by a debounced auto-save that persists your changes after a brief idle interval.<h3>Split Mode</h3>Renders the editor and a live markdown preview side by side in a 50/50 horizontal layout. As you type in the left pane, the right pane re-renders the parsed markdown in real time.<h3>Preview Mode</h3>Hides the raw editor and renders the full markdown output in read-only mode. Useful for final review before export or for reading long-form specifications.<h2>Persistence and Auto-Save</h2>All note content is saved automatically to the cloud and available from any device where you sign in.1. Creation — <code>+ NEW</code> or <code>+ CREATE NOTE</code> initializes a blank note with a default "Untitled note" title. 2. Auto-save — Changes are saved automatically after ~1.5 seconds of idle time. The status bar transitions through <code>UNSAVED → SYNCING → SAVED</code>. 3. Manual save — The SAVE NOW button forces an immediate save, bypassing the auto-save timer. 4. Conflict resolution — If you edit the same note on multiple devices, the most recent save takes precedence.<h2>Note Management</h2><h3>Search</h3>The left-panel search bar filters the note list client-side by matching the query against both the note title and content body. The filter is case-insensitive and applies instantly on input change.<h3>Save Now</h3>Forces an immediate save of the current editor buffer, useful when you want to guarantee your changes are persisted before navigating away.<h3>Export</h3>The EXPORT button serializes the note's raw markdown content to a <code>.md</code> file and triggers a browser download via a dynamically constructed <code>Blob</code> URL. The default filename is derived from the note title, sanitized for filesystem compatibility (e.g., <code>Prompt-Refactoring-Refinement-Log.md</code>).<h3>Delete</h3>Deletes the note permanently. A confirmation dialog is displayed to prevent accidental data loss. The dialog warns: _"This action cannot be undone. The note and all its content will be permanently removed."_<h2>Sidebar Integration</h2>The Notes view is registered as a first-class navigation item in the Dashboard sidebar, positioned between HISTORY and API KEYS:``<code> TRANSLATE TEXT TRANSLATE FILES HISTORY NOTES ← current API KEYS </code>`<code>The active state is indicated by the primary accent color on the sidebar label and icon.<h2>Limits and Specifications</h2>| Aspect | Detail | | :------------------ | :----------------------------------------------------- | | Max Size | 200 KB per note (a warning appears as you approach it) | | Auto-save Delay | ~1.5 seconds of idle time | | Privacy | Notes are private — only visible to your account | | Markdown | Full GFM support including tables, code blocks, images | | Export Format | </code>.md<code> (Markdown) file download |<h2>Best Practices</h2><li>Use headings for structure — Notes that begin with a </code># Heading<code> automatically use that heading as the display title in the sidebar list.</li> <li>Leverage Split mode for long specs — Writing complex documents benefits from the real-time preview to catch formatting issues early.</li> <li>Export before major edits — Use the Export feature to create a local backup before restructuring a large note.</li> <li>Stay within the 200 KB limit — For very large documents, consider splitting content across multiple notes or using the Document Translation feature with uploaded </code>.md` files.</li> </body> </html>