Marcos Paulo
a71e294566
- specs: mobile-and-sync, collaboration, vault-launcher, e2ee, attachments-and-history, capture-and-publish, agents (brief and orchestrator notes for MiniMax and GLM agents) - research: sync landscape, security and server, mobile platform (browsed, cited) - design/mobile: 24 PaperCraft exports (dark and light) of the phone, desktop, sharing and launcher screens - .claude: project skills and path rules so delegated agents follow the repo rules; CLAUDE.md imports AGENTS.md - ARCHITECTURE and ROADMAP updated; AGENTS.md lists the approved sync dependencies Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
3.9 KiB
Mobile and sync: designs
Made in PaperCraft on 2026-10-20, in the project NotesCraft (~/Documents/paper-rs/NotesCraft), page Mobile and sync, using the project's own variables (bg, surface, surface-2, canvas, accent, ...) in both modes (Dark, Light). Phone artboards are 390 x 844, the desktop one 1280 x 960. Exports: design/mobile/*.png (dark) and *-light.png at 2x. Lint: 0 errors on all nine; the two warnings on the desktop page are 40 pt buttons, accepted for dense desktop UI.
Direction: calm and quiet, like paper. One accent (mauve) for the primary action and the active tab, one semantic set (green synced, yellow attention, red failure). Everything sits on the 4 pt grid; touch targets are 44 pt or more; the home-indicator area is 32 pt.
| # | Screen | File | What to build |
|---|---|---|---|
| 1 | Notes | design/mobile/01-notes.png |
Title, sync pill (dot + "Synced - 2 min ago"), search field, note cards (title, two-line preview, folder and date, conflict badge), bottom tab bar Notes / Search / Graph / Calendar / More. Tab bar replaces the desktop sidebar below 600 pt. |
| 2 | Note editor | design/mobile/02-note-editor.png |
Top bar (back, title, sync pill, menu), content, keyboard toolbar of 44 pt buttons (bold, italic, link, list, task, tag, indent, hide keyboard) pinned above the soft keyboard. |
| 3 | Sync sheet | design/mobile/03-sync-sheet.png |
Bottom sheet from the sync pill: status headline, device list with state (online, synced, stale), "2 conflicts to review" row, toggles (Wi-Fi only, attachments, settings and themes), primary "Sync now". |
| 4 | Pair device | design/mobile/04-pair-device.png |
Server URL, pairing code field (12 hex, grouped), "Scan QR code instead", primary "Pair this device", note that the code works once and expires in 10 minutes. |
| 5 | Conflict | design/mobile/05-conflict.png |
File name, plain-language line ("Nothing was lost"), both versions as cards with the differing line highlighted, "Keep both" (primary), "Keep mine", "Keep theirs". |
| 6 | First sync | 06-first-sync.png |
Progress for the first download: count, percent, attachments note, "Open notes so far", Pause. |
| 7 | Offline | 07-offline.png |
Offline banner, pill "Offline - 3 changes waiting", per-note "Waiting to sync" badge. |
| 8 | Sign in again | 08-sign-in-again.png |
Revoked or expired token: reassurance that nothing was deleted, Pair again, Keep working offline. |
| 9 | Desktop Settings > Sync | 09-desktop-settings-sync.png |
Server card, device list with Revoke, options, Add a device. |
States still to design: empty vault, storage-full, E2EE passphrase prompt, tablet two-pane. The artboards were built with raw frames, not yet with the project's Design System components (Button / Primary, Chip / *, Toggle / *): swap them in with import_components + create_instance when polishing.
Mapping to desktop: the same screens exist as Settings > Sync (pairing, devices, options), a status-bar indicator (the sync pill) and a Conflicts tab. Strings go through crates/i18n as always.
Collaboration and launcher designs (PaperCraft project NotesCraft)
Pages Collaboration and Home and vaults; exports in design/mobile/. Specs: specs/collaboration/spec.md, specs/vault-launcher/spec.md.
| # | Screen | File |
|---|---|---|
| 10 | Share dialog (members with roles, one-time invite code, Stop sharing) | 10-share-dialog.png |
| 11 | Live editing: avatars of peers, "Live" pill, remote cursor flags and selection | 11-live-editing.png |
| 12 | Join a shared folder (code, preview of what you get, role) | 12-join-shared-folder.png |
| 13 | Shared folders in the phone Explorer, removed-from-folder banner | 13-shared-folders.png |
| 14 | Home / Vaults (desktop launcher): actions, recents with sync pill, role, avatars, missing folder | 14-home-vaults-desktop.png |
| 15 | Vaults (phone): on this phone, on your server, New vault, Join | 15-vaults-phone.png |