[UX-004] UX Design: Document Editor

[CalvinAllen]

Overview

Design specification for the document editor, used for viewing/editing JSON documents.

Location

• Opens as a document tab in the main editor area
• Tab title: [Document ID] - [Collection] (e.g., "airline_10 - travel-sample._default._default")

Layout

┌─────────────────────────────────────────────────────────────┐
│ [Save] [Save As...] [Revert]              [Format JSON]     │
├─────────────────────────────────────────────────────────────┤
│ Document ID: airline_10                    [Copy ID]        │
│ Collection:  travel-sample._default._default                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1 │ {                                                      │
│  2 │   "type": "airline",                                   │
│  3 │   "name": "Sample Airline",                            │
│  4 │   "country": "United States"                           │
│  5 │ }                                                      │
│    │                                                        │
│    │                                                        │
└─────────────────────────────────────────────────────────────┘
│ Status: Valid JSON                         Ln 3, Col 12     │
└─────────────────────────────────────────────────────────────┘

Features

Toolbar

• Save: Upsert document to Couchbase
• Save As...: Save with new document ID (creates new document)
• Revert: Reload from server (discard local changes)
• Format JSON: Pretty-print / auto-indent

Document Info Bar

• Document ID (read-only for existing, editable for new)
• Collection path (bucket.scope.collection)
• Copy ID button

Editor

• JSON syntax highlighting
• Line numbers
• Bracket matching
• Error squiggles for invalid JSON

Status Bar

• JSON validation status (Valid / Invalid with error details)
• Cursor position

New Document Mode

• Document ID field is editable
• Title: "New Document - [Collection]"
• Save creates new document

Dirty State

• Tab shows * when modified
• Prompt to save on close if dirty

Acceptance Criteria

• Editor layout wireframe approved
• Toolbar actions defined
• JSON validation behavior defined
• New vs Edit document modes defined