Building a task screen where state, routing, and responsive layout stay separate

What was happening

The current Conduit Flow task screen uses shared task state, category filtering, completion counts, completion toggles, deletion, task-detail navigation, and a dedicated add-task route. It also needs to remain usable across different screen widths instead of assuming one fixed mobile layout.

Why the obvious solution was not enough

The screen should coordinate the task experience without duplicating task business logic or hard-coding spacing for one device. Navigation, state mutations, filtering, and layout measurements need clear boundaries so later focus-session and analytics features can reuse the same task data.

How the solution works

1. Read task data and mutations from the shared useTasks() hook instead of storing another copy of the task list inside the screen.
2. Filter the rendered list by the active category while computing completion counts from the same source of truth.
3. Call the shared toggleTaskComplete and deleteTask actions so task mutations remain consistent across screens.
4. Route task-detail taps to a task-specific page and route quick add to the dedicated task modal instead of expanding every edit control into the list view.
5. Map task categories to a bounded icon set so visual identity comes from data rather than ad-hoc JSX in each task row.
6. Use the responsive layout helper for horizontal padding, top and bottom spacing, and maximum content width rather than repeating magic numbers in the screen.
7. Keep the screen scrollable and content-width constrained so larger devices gain breathing room without stretching task rows indefinitely.

const { tasks, toggleTaskComplete, deleteTask } = useTasks();
const layout = useResponsiveLayout();

const visibleTasks = activeCategory === 'all'
  ? tasks
  : tasks.filter((task) => task.category === activeCategory);

const openTask = (taskId: string) => router.push(`/tasks/${taskId}`);
const addTask = () => router.push('/tasks/modal');

What should be verified before shipping

• Toggle completion from a filtered view and confirm the shared task state updates correctly.
• Delete a task and confirm counts and the visible list update without stale rows.
• Open several task IDs directly and verify the detail route resolves the intended task.
• Use quick add, save a task, and confirm the list reflects the new state after returning.
• Test narrow and wide screens to confirm layout padding and maximum width come from the responsive helper rather than per-device patches.
• Verify empty categories and a fully completed task list have intentional states rather than blank space.

What changed

The task screen acts as a coordinator instead of a second data store. That gives the product a cleaner foundation for connecting tasks to focus sessions, journaling, and future insights.

Reusable lesson

A useful product screen should compose state, navigation, and layout rather than own all three. Shared boundaries make later features easier to add without rewriting the original screen.