How Relative Dates and UX Polish Turn a Task App into a Habit
Why 'Tomorrow' beats 'Mar 06' every time — and 5 other UX tricks that make Nyura addictive without dark patterns.
The problem with absolute dates
When a task shows 'Due: Mar 06', your brain has to do 3 operations: what day is today? What day is March 6? How many days between them? That's unnecessary cognitive load you repeat dozens of times a day.
Nyura now replaces raw dates with contextual labels: 'Today', 'Tomorrow', 'In 3d', '2d overdue'. Combined with color coding (red = overdue, orange = urgent, neutral = upcoming), it's instant 'glance and know'.
The 3-zone swipe: tomorrow, next week, done
On mobile, every task card is swipeable to the left. 3 zones appear progressively: snooze to tomorrow (blue), snooze to next week (amber), complete (green). Haptic feedback confirms each zone. It's faster than opening any menu.
The technical secret: a direction lock with 1.2x ratio prevents accidental swipes during vertical scrolling. Touch events are registered with passive: false only on touchmove to call preventDefault() without blocking initial scroll.
Subtasks in one click without leaving the list
Before, checking a subtask required opening the task, scrolling to subtasks, checking, closing. Now a simple click on the progress bar opens a popover with all subtasks. Loading is on-demand (no N+1) and checkboxes are optimistic.
Optimistic update means the checkbox toggles immediately client-side, then the Supabase request fires in the background. If it fails, the UI self-corrects on next render. The user never sees latency.
Keyboard shortcuts discovered, not hidden
Nyura has always had Cmd+K for search and a dozen shortcuts for navigation/editing. But nobody used them because nobody knew they existed. Solution: pressing '?' shows an overlay with all shortcuts, grouped by category.
Shortcuts are also customizable — stored in localStorage and merged with defaults on each update. If we add a new shortcut, it appears automatically without overwriting existing customizations.
The focus-visible ring: invisible accessibility
A single CSS addition in @layer base: :focus-visible with a primary color ring. Invisible to mouse users (no ring on click), visible to keyboard users (Tab navigates with a crisp ring). Radix primitives get a suppressor to avoid double rings.
It's the kind of improvement nobody notices — but it makes the app usable for the 15% of users who navigate by keyboard or use assistive technology. Accessibility isn't a feature, it's a baseline.