# 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 │ └─────────────────────────────────────────────┘ ```