sanasto-app/docs/AGENTS.md

AGENTS.md

Project intent

Build a Vue-based PWA in the project root named Sanasto. The UI should mirror the look and feel of the Rails app in ../sanasto.wiki.

Design alignment (from ../sanasto.wiki)

• Use a light, airy UI with slate neutrals and indigo/emerald accents.
• Typography: clean, sans-serif with bold headlines and uppercase micro-labels.
• Layout: full-height table view, sticky header row, sticky first column, and scrollable grid.
• UI motifs: rounded pills/tags, soft borders, subtle shadows, and inline badges.
• Primary colors:
  • Indigo for primary actions and highlights.
  • Emerald for positive states (e.g., "complete").
  • Amber for warnings (e.g., "unverified").
  • Red tint for rows with missing translations.

Data/API

• Swagger: https://sanasto.wiki/api/swagger
• Endpoint: GET /api/entries?since=ISO8601
• Entry fields: id, category, fi, en, sv, no, ru, de, updated_at.

Offline + sync

• Use SQLite for storage (web-friendly: sql.js or a similar WASM-backed SQLite).
• Keep a meta table for sync state (last_sync_at in ISO8601).
• On app start and when online:
  1. Fetch GET /api/entries?since=<last_sync_at>.
  2. Upsert entries by id.
  3. Update last_sync_at to the max updated_at seen.
• The public API is read-only; any local edits should be treated as local-only unless a write API is added.

PWA requirements

• Installable manifest with name Sanasto.
• Service worker for asset caching + offline shell.
• Clear offline/online indicator and last sync time.

Implementation constraints

• App location: project root.
• Build output: dist.
• Prefer clear, maintainable components over excessive abstraction.
• Preserve the Rails app visual language; avoid introducing a new design system.