Result box: color-code by result type + rewrite error messages in plain user language #105

Closed
opened 2026-09-09 21:58:12 +00:00 by poslop · 0 comments
Owner

Two improvements to the result box on the new page:

  1. COLOR BY TYPE: the result box should use the semantic status colors (already defined: --ok, --err, --warn from #16). Success = --ok border/text tint, validation errors = --err, soft warnings = --warn. Currently it's monochrome regardless of outcome.

  2. HUMAN-FRIENDLY ERROR MESSAGES: rewrite all user-facing validation errors from developer-speak to plain guidance, and map them client-side where the backend message is technical. Examples of the desired tone:

  • 'Error: custom slug must be 1-64 chars: letters, digits, dash, underscore; must start with letter or digit' -> 'Please keep the Custom URL under 64 characters, using only letters, numbers, dashes, or underscores (starting with a letter or number).'
  • slug taken -> 'That Custom URL is already taken. Try another.'
  • content empty -> 'Write or paste something first.'
  • content too large -> 'This paste is too large. The limit is 5 MB.'
  • expiry out of range -> 'Please pick an expiry between 1 minute and 1 year.'
  • password too short / rate limited -> similarly plain phrasing ('Too many tries. Wait a minute and try again.')

Implementation: keep technical detail in API responses for API consumers, but the new-page JS translates known backend error patterns into the friendly strings above (a small error-message map, fallback to a generic 'Something went wrong. Please try again.' for unknown errors). Result box gets an icon or colored left border matching the status color.

Audit ALL backend validation messages (main.go, cans.go, internal/api) and either rewrite them plainly or add a machine-readable error code the UI can map (preferred: error code like 'slug_taken' + human message). Update docs/API.md error section.

Two improvements to the result box on the new page: 1. COLOR BY TYPE: the result box should use the semantic status colors (already defined: --ok, --err, --warn from #16). Success = --ok border/text tint, validation errors = --err, soft warnings = --warn. Currently it's monochrome regardless of outcome. 2. HUMAN-FRIENDLY ERROR MESSAGES: rewrite all user-facing validation errors from developer-speak to plain guidance, and map them client-side where the backend message is technical. Examples of the desired tone: - 'Error: custom slug must be 1-64 chars: letters, digits, dash, underscore; must start with letter or digit' -> 'Please keep the Custom URL under 64 characters, using only letters, numbers, dashes, or underscores (starting with a letter or number).' - slug taken -> 'That Custom URL is already taken. Try another.' - content empty -> 'Write or paste something first.' - content too large -> 'This paste is too large. The limit is 5 MB.' - expiry out of range -> 'Please pick an expiry between 1 minute and 1 year.' - password too short / rate limited -> similarly plain phrasing ('Too many tries. Wait a minute and try again.') Implementation: keep technical detail in API responses for API consumers, but the new-page JS translates known backend error patterns into the friendly strings above (a small error-message map, fallback to a generic 'Something went wrong. Please try again.' for unknown errors). Result box gets an icon or colored left border matching the status color. Audit ALL backend validation messages (main.go, cans.go, internal/api) and either rewrite them plainly or add a machine-readable error code the UI can map (preferred: error code like 'slug_taken' + human message). Update docs/API.md error section.
poslop added spent time 50 seconds 2026-09-09 22:28:31 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Total Time Spent: 50 seconds
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: poslop/palette#105