08a88b5e06
- SPEC.md: Complete UI/UX specification with design principles, layout architecture, interaction patterns, data flow, and accessibility requirements - VIEWS.md: Text-based wireframes for Dashboard, Document Viewer, Document Editor, and Library Browser views (desktop and mobile) - COMPONENTS.md: Reusable component library with buttons, inputs, cards, tags, navigation, modals, and feedback components - STYLES.md: Style guide with design tokens (colors, typography, spacing), global styles, animations, responsive breakpoints, and dark mode implementation Design follows dark mode first approach inspired by Mission Control dashboard, with full mobile responsiveness.
542 lines
33 KiB
Markdown
542 lines
33 KiB
Markdown
# SimpleNote Web - Wireframes
|
||
|
||
Text-based wireframes for each view. Uses ASCII-style box-drawing to represent layout.
|
||
|
||
---
|
||
|
||
## View 1: Dashboard / Main View
|
||
|
||
### Desktop Layout (>1024px)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ [≡] SimpleNote 🔍 Search documents... [🌙] [⚙️] [👤] │
|
||
├─────────────────┬─────────────────────────────────────────────────────────────┤
|
||
│ │ Documents [+ Doc] [+ Lib] [⊞] [≡] │
|
||
│ 📁 Libraries ├───────────────────────────────────────────────────────────── │
|
||
│ ├─ Backend │ │
|
||
│ │ ├─ API │ ┌──────────────────────────────────────────────────────┐ │
|
||
│ │ └─ Auth │ │ REQ-001 · API Authentication Design │ │
|
||
│ ├─ Frontend │ │ 🏷️ backend 🏷️ api 🏷️ auth │ │
|
||
│ └─ DevOps │ │ 📅 Mar 28 · 👤 agent-001 · ✓ draft · 🔴 high │ │
|
||
│ │ └──────────────────────────────────────────────────────┘ │
|
||
│ ───────────── │ ┌──────────────────────────────────────────────────────┐ │
|
||
│ │ │ NOTE-002 · Deployment Checklist │ │
|
||
│ 🏷️ Tags │ │ 🏷️ devops 🏷️ deployment │ │
|
||
│ ├─ backend (5) │ │ 📅 Mar 27 · 👤 agent-002 · ✓ approved │ │
|
||
│ ├─ api (3) │ └──────────────────────────────────────────────────────┘ │
|
||
│ ├─ auth (2) │ ┌──────────────────────────────────────────────────────┐ │
|
||
│ ├─ devops (4) │ │ SPEC-003 · Database Schema v2 │ │
|
||
│ └─ frontend(2) │ │ 🏷️ backend 🏷️ database │ │
|
||
│ │ │ 📅 Mar 26 · 👤 agent-001 · ✓ implemented · 🟡 med │ │
|
||
│ ───────────── │ └──────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
│ Quick Links │ Showing 12 of 42 documents │
|
||
│ ├─ All Docs │ │
|
||
│ ├─ Recent (7) │ │
|
||
│ └─ Favorites │ │
|
||
└─────────────────┴─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Mobile Layout (<768px)
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ [≡] SimpleNote [🔍][🌙] │
|
||
├─────────────────────────────┤
|
||
│ 🔍 Search... │
|
||
├─────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────┐│
|
||
│ │ API Authentication ││
|
||
│ │ REQ-001 · 🔴 High ││
|
||
│ │ 🏷️ backend · api ││
|
||
│ └─────────────────────────┘│
|
||
│ ┌─────────────────────────┐│
|
||
│ │ Deployment Checklist ││
|
||
│ │ NOTE-002 · ✓ Approved ││
|
||
│ │ 🏷️ devops ││
|
||
│ └─────────────────────────┘│
|
||
│ ┌─────────────────────────┐│
|
||
│ │ Database Schema v2 ││
|
||
│ │ SPEC-003 · ✓ Done ││
|
||
│ │ 🏷️ backend · database ││
|
||
│ └─────────────────────────┘│
|
||
│ │
|
||
│ 12 of 42 documents │
|
||
│ │
|
||
├─────────────────────────────┤
|
||
│ [🏠] [📁] [+📝] [⚙️] │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### States
|
||
|
||
**Loading State**:
|
||
```
|
||
│ ... Loading documents... │
|
||
│ ████████████░░░░░░░░░ 60% │
|
||
```
|
||
|
||
**Empty State**:
|
||
```
|
||
│ │
|
||
│ 📄 │
|
||
│ No documents yet │
|
||
│ │
|
||
│ Create your first document │
|
||
│ [+ Create Doc] │
|
||
│ │
|
||
```
|
||
|
||
**Search Results**:
|
||
```
|
||
│ 🔍 "authentication" │
|
||
│ Clear ✕ │
|
||
│ ───────────────────────── │
|
||
│ 3 results for "auth..." │
|
||
│ ┌─────────────────────────┐│
|
||
│ │ API Authentication ││
|
||
│ │ ...supports **auth**... ││
|
||
│ └─────────────────────────┘│
|
||
```
|
||
|
||
---
|
||
|
||
## View 2: Document Viewer
|
||
|
||
### Desktop Layout
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ ← Back API Authentication Design [✏️] [↓] [🗑️] │
|
||
├─────────────────────────────────────────────────────────────────────────┬───────┤
|
||
│ │ Type │
|
||
│ # API Authentication Design │ REQ │
|
||
│ ├───────┤
|
||
│ ## Descripción │Status │
|
||
│ El sistema debe soportar autenticación via tokens Bearer... │ draft │
|
||
│ ├───────┤
|
||
│ ## Criterios de Aceptación │Priority│
|
||
│ - [ ] Endpoint POST /api/v1/auth/token acepta credenciales... │ 🔴 │
|
||
│ - [ ] Middleware extrae token del header... │ High │
|
||
│ - [ ] Middleware retorna 401 si header ausente... ├───────┤
|
||
│ - [ ] Token tiene prefijo `snk_`... │ Tags │
|
||
│ │ [backend]│
|
||
│ ## Notas │ [api] │
|
||
│ Tokens en esta versión son secretos compartidos... │ [auth] │
|
||
│ │ │
|
||
│ ```javascript ├───────┤
|
||
│ // authMiddleware.js │Author │
|
||
│ const token = req.headers.authorization?.replace('Bearer ', ''); │agent- │
|
||
│ ``` │001 │
|
||
│ ├───────┤
|
||
│ │Created│
|
||
│ │Mar 28 │
|
||
│ │10:00 │
|
||
│ ├───────┤
|
||
│ │Updated│
|
||
│ │Mar 28 │
|
||
│ │12:30 │
|
||
└─────────────────────────────────────────────────────────────────────────┴───────┘
|
||
```
|
||
|
||
### Mobile Layout (Metadata collapses to top)
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ ← Back [✏️] [↓] [🗑️] │
|
||
├─────────────────────────────────┤
|
||
│ REQ · draft · 🔴 High │
|
||
│ 🏷️ backend 🏷️ api 🏷️ auth │
|
||
├─────────────────────────────────┤
|
||
│ │
|
||
│ # API Authentication Design │
|
||
│ │
|
||
│ ## Descripción │
|
||
│ El sistema debe soportar... │
|
||
│ │
|
||
│ ## Criterios de Aceptación │
|
||
│ - [ ] Endpoint POST... │
|
||
│ - [ ] Middleware extrae... │
|
||
│ │
|
||
│ ## Notas │
|
||
│ Tokens en esta versión... │
|
||
│ │
|
||
│ ```javascript │
|
||
│ const token = req.headers... │
|
||
│ ``` │
|
||
│ │
|
||
│ Author: agent-001 │
|
||
│ Created: Mar 28, 2026 │
|
||
└─────────────────────────────────┘
|
||
```
|
||
|
||
### Delete Confirmation Modal
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ⚠️ Confirm Delete │
|
||
│ │
|
||
│ Delete "API Authentication"? │
|
||
│ │
|
||
│ This will permanently remove: │
|
||
│ • Document content │
|
||
│ • All metadata │
|
||
│ • Tag associations │
|
||
│ │
|
||
│ [Cancel] [Delete] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## View 3: Document Editor
|
||
|
||
### Desktop Layout (Split View)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ Cancel Editing: API Authentication [Template ▼] [Save] │
|
||
├────────────────────────────────────────────────────────────────┬────────────────┤
|
||
│ Title: [API Authentication Design ] │ Auto-saved ✓ │
|
||
│ Library: [Backend Requirements ▼] │ │
|
||
│ Type: [Requirement ▼] Status: [Draft ▼] Priority: [High ▼] │ │
|
||
├────────────────────────────────────────────────────────────────┤ │
|
||
│ Tags: [+ Add tag...] │ │
|
||
│ [backend ×] [api ×] [auth ×] │ │
|
||
├────────────────────────────────────────────────────────────────┴────────────────┤
|
||
│ [B] [I] [H1] [H2] [H3] [•] [1.] [☐] [</>] [🔗] [📷] [Table] │ [Preview ▼] │
|
||
├────────────────────────────────────────────────────────────────┬────────────────┤
|
||
│ │ │
|
||
│ ## Descripción │ ## Descripción│
|
||
│ El sistema debe soportar autenticación via tokens │ │
|
||
│ Bearer para todas las rutas protegidas... │ ## Criterios │
|
||
│ │ de Aceptación │
|
||
│ ## Criterios de Aceptación │ │
|
||
│ - [ ] Endpoint POST /api/v1/auth/token │ • [ ] Criterio│
|
||
│ - [ ] Middleware extrae token │ 1 │
|
||
│ - [ ] Middleware retorna 401 │ • [ ] Criterio│
|
||
│ - [ ] Token tiene prefijo `snk_` │ 2 │
|
||
│ │ │
|
||
│ ## Notas │ │
|
||
│ Tokens en esta versión son secretos compartidos... │ │
|
||
│ │ │
|
||
│ ```javascript │ │
|
||
│ const token = req.headers... │ │
|
||
│ ``` │ │
|
||
│ │ │
|
||
├────────────────────────────────────────────────────────────────┴────────────────┤
|
||
│ Write Preview │
|
||
└─────────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Mobile Layout (Tabbed)
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ [✕] Edit Document [Save] │
|
||
├─────────────────────────────────┤
|
||
│ [Write] [Preview] [Meta] │
|
||
├─────────────────────────────────┤
|
||
│ │
|
||
│ Title: │
|
||
│ ┌─────────────────────────────┐│
|
||
│ │ API Authentication Design ││
|
||
│ └─────────────────────────────┘│
|
||
│ │
|
||
│ Content: │
|
||
│ ┌─────────────────────────────┐│
|
||
│ │ ## Descripción ││
|
||
│ │ El sistema debe soportar... ││
|
||
│ │ ││
|
||
│ │ ## Criterios de Aceptación ││
|
||
│ │ - [ ] Endpoint POST... ││
|
||
│ │ ││
|
||
│ └─────────────────────────────┘│
|
||
│ │
|
||
│ [+] Add tag: [____________] │
|
||
│ [backend ×] [api ×] [auth ×] │
|
||
│ │
|
||
│ Type: [Requirement ▼] │
|
||
│ Status: [Draft ▼] │
|
||
│ Priority: [High ▼] │
|
||
│ Library: [Backend ▼] │
|
||
│ │
|
||
│ Auto-saved ✓ │
|
||
└─────────────────────────────────┘
|
||
```
|
||
|
||
### Template Picker Dropdown
|
||
|
||
```
|
||
│ [Template ▼] │
|
||
│ ┌─────────────────────────────┐│
|
||
│ │ 📋 Requirement Document ││
|
||
│ │ 📝 General Note ││
|
||
│ │ 📐 Specification ││
|
||
│ │ 📄 Blank Document ││
|
||
│ └─────────────────────────────┘│
|
||
```
|
||
|
||
### Requirement Template Content (inserted)
|
||
|
||
```
|
||
---
|
||
id: REQ-XXX
|
||
title: New Requirement
|
||
type: requirement
|
||
priority: medium
|
||
status: draft
|
||
tags: []
|
||
createdBy: user
|
||
createdAt: YYYY-MM-DD
|
||
---
|
||
|
||
# New Requirement
|
||
|
||
## Descripción
|
||
[Descripción clara del requerimiento]
|
||
|
||
## Criterios de Aceptación
|
||
- [ ] Criterio 1
|
||
- [ ] Criterio 2
|
||
|
||
## Notas
|
||
[Notas adicionales]
|
||
```
|
||
|
||
### Unsaved Changes Warning Modal
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ⚠️ Unsaved Changes │
|
||
│ │
|
||
│ You have unsaved changes. │
|
||
│ │
|
||
│ [Discard] [Save & Close] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## View 4: Library Browser
|
||
|
||
### Desktop Layout
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ Home / Backend / API [+ Doc] [+ Lib] │
|
||
├─────────────────┬─────────────────────────────────────────────────────────────┤
|
||
│ │ │
|
||
│ 📁 Libraries │ 📁 API 3 docs │
|
||
│ ├─ 🔵 Backend │ ┌──────────────────────────────────────────────────────┐ │
|
||
│ │ ├─ ⚪ API │ │ 📄 REST API Endpoints REQ-010 │ │
|
||
│ │ └─ ⚪ Auth │ │ 🏷️ api · 🏷️ rest · 📅 Mar 28 │ │
|
||
│ ├─ 🔵 Frontend│ └──────────────────────────────────────────────────────┘ │
|
||
│ └─ 🔵 DevOps │ ┌──────────────────────────────────────────────────────┐ │
|
||
│ │ │ 📄 Authentication Flow SPEC-005 │ │
|
||
│ ───────────── │ │ 🏷️ api · 🏷️ auth · 📅 Mar 27 │ │
|
||
│ │ └──────────────────────────────────────────────────────┘ │
|
||
│ 📁 API │ ┌──────────────────────────────────────────────────────┐ │
|
||
│ ├─ REST │ │ 📄 Rate Limiting NOTE-012 │ │
|
||
│ └─ GraphQL │ │ 🏷️ api · 📅 Mar 26 │ │
|
||
│ │ └──────────────────────────────────────────────────────┘ │
|
||
│ ───────────── │ │
|
||
│ │ ─────────────── Sub-libraries ─────────────── │
|
||
│ Quick Links │ ┌──────────────────────────────────────────────────────┐│
|
||
│ ├─ All Docs │ │ 📁 REST [+ Doc] [+ Lib] ││
|
||
│ └─ Recent │ └──────────────────────────────────────────────────────┘│
|
||
│ │ ┌──────────────────────────────────────────────────────┐│
|
||
│ │ │ 📁 GraphQL [+ Doc] [+ Lib]││
|
||
│ │ └──────────────────────────────────────────────────────┘│
|
||
└─────────────────┴─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Mobile Layout
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ ← Home / Backend / API │
|
||
├─────────────────────────────────┤
|
||
│ │
|
||
│ 📁 API │
|
||
│ 3 documents · 2 sub-libs │
|
||
│ │
|
||
│ [+] Doc [+] Lib │
|
||
│ │
|
||
│ ┌─────────────────────────────┐│
|
||
│ │ 📄 REST API Endpoints ││
|
||
│ │ REQ-010 · 🏷️ api ││
|
||
│ └─────────────────────────────┘│
|
||
│ ┌─────────────────────────────┐│
|
||
│ │ 📄 Authentication Flow ││
|
||
│ │ SPEC-005 · 🏷️ api · 🏷️ auth ││
|
||
│ └─────────────────────────────┘│
|
||
│ │
|
||
│ 📁 Sub-libraries │
|
||
│ ├─ 📁 REST │
|
||
│ └─ 📁 GraphQL │
|
||
│ │
|
||
├─────────────────────────────────┤
|
||
│ [🏠] [📁] [+📝] [⚙️] │
|
||
└─────────────────────────────────┘
|
||
```
|
||
|
||
### Create Library Modal
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 📁 New Library │
|
||
│ │
|
||
│ Name: │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ My New Library │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ Parent: [Backend Requirements ▼] │
|
||
│ │
|
||
│ [Cancel] [Create] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### Rename Library Modal
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ✏️ Rename Library │
|
||
│ │
|
||
│ Name: │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ API Requirements │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
│ [Cancel] [Rename] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### Delete Library Modal
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ⚠️ Confirm Delete │
|
||
│ │
|
||
│ Delete library "API"? │
|
||
│ │
|
||
│ ⚠️ This will also delete: │
|
||
│ • 3 documents │
|
||
│ • 2 sub-libraries │
|
||
│ • 5 total documents │
|
||
│ │
|
||
│ [Cancel] [Delete] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## Context Menu (Right-click / Long-press)
|
||
|
||
```
|
||
│ 📄 REST API Endpoints │
|
||
│ └── [Right-click] → │
|
||
│ │
|
||
│ ┌─────────────────────────┐ │
|
||
│ │ ✏️ Edit │ │
|
||
│ │ 📄 Open │ │
|
||
│ │ 📋 Duplicate │ │
|
||
│ │ 📁 Move to Library │ │
|
||
│ │ ─────────────────────── │ │
|
||
│ │ 🗑️ Delete │ │
|
||
│ └─────────────────────────┘ │
|
||
```
|
||
|
||
---
|
||
|
||
## Toast Notifications
|
||
|
||
```
|
||
│ ┌─────────────┐│
|
||
│ │ ✓ Saved ││
|
||
│ └─────────────┘│
|
||
│ ┌─────────────────────┐ │
|
||
│ │ ✕ Failed to save │ │
|
||
│ │ [Retry] │ │
|
||
│ └─────────────────────┘ │
|
||
```
|
||
|
||
---
|
||
|
||
## Settings Panel
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ⚙️ Settings │
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ Appearance │
|
||
│ Theme: [Dark ▼] [Light] [System] │
|
||
│ │
|
||
│ ───────────────────────────────── │
|
||
│ │
|
||
│ API Configuration │
|
||
│ API URL: │
|
||
│ ┌─────────────────────────────────┐│
|
||
│ │ http://localhost:3000/api/v1 ││
|
||
│ └─────────────────────────────────┘│
|
||
│ │
|
||
│ API Token: │
|
||
│ ┌─────────────────────────────────┐│
|
||
│ │ snk_xxxxxxxxxxxxxxxxxxxxxxxx ││
|
||
│ └─────────────────────────────────┘│
|
||
│ │
|
||
│ [Test Connection] [Save] │
|
||
│ │
|
||
│ ───────────────────────────────── │
|
||
│ │
|
||
│ Data │
|
||
│ [Clear Local Cache] │
|
||
│ │
|
||
│ ───────────────────────────────── │
|
||
│ │
|
||
│ About │
|
||
│ SimpleNote Web v0.1.0 │
|
||
│ │
|
||
│ [✕] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## Keyboard Shortcuts Reference
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ Global │
|
||
├─────────────────────────────────────────────┤
|
||
│ Ctrl/Cmd + K Focus search │
|
||
│ Ctrl/Cmd + N New document │
|
||
│ Ctrl/Cmd + Shift + N New library │
|
||
│ Escape Close/Clear │
|
||
├─────────────────────────────────────────────┤
|
||
│ Document Editor │
|
||
├─────────────────────────────────────────────┤
|
||
│ Ctrl/Cmd + S Save │
|
||
│ Ctrl/Cmd + B Bold │
|
||
│ Ctrl/Cmd + I Italic │
|
||
│ Ctrl/Cmd + K Insert link │
|
||
│ Ctrl/Cmd + Shift + P Toggle preview │
|
||
├─────────────────────────────────────────────┤
|
||
│ Document Viewer │
|
||
├─────────────────────────────────────────────┤
|
||
│ E Edit document │
|
||
│ X Export markdown │
|
||
│ Delete Delete (confirm) │
|
||
├─────────────────────────────────────────────┤
|
||
│ Library Browser │
|
||
├─────────────────────────────────────────────┤
|
||
│ R Rename │
|
||
│ Delete Delete (confirm) │
|
||
│ Backspace Go to parent │
|
||
└─────────────────────────────────────────────┘
|
||
```
|