Feature: Focus Mode — Show Only Standards That Need Work

[clates]

Problem

As a homeschool parent planning this week's lessons, I want to quickly see only the standards that need more work (needs_improvement) across all subjects — without wading through a sea of not-yet-started items.

The current "Hide Completed" toggle removes green (completed) cards, but still leaves all blue (not_started) cards visible. When a student has many untouched standards, this floods the view and makes it hard to find the actionable amber (needs_improvement) items that actually need attention right now.

There is currently no way to enter a "Focus Mode" that surfaces only the standards actively in progress.

---

Proposed Solution

Add a "Focus on Needs Work" toggle that hides both completed and not_started standards, leaving only needs_improvement items visible. This should mirror the existing hideCompleted pattern throughout the codebase.

Implementation plan

1. src/context/VisibilityContext.tsx
Add hideNotStarted: boolean and its setter to the context interface and provider, alongside the existing hideCompleted state.

2. src/App.tsx

• Lines 13–19: initialize hideNotStarted from localStorage using the same pattern as hideCompleted.
• Lines 29–30: pass hideNotStarted / setter into the context provider.
• Lines 90–93: persist hideNotStarted to localStorage in a useEffect, mirroring the existing persist effect.

3. src/components/SettingsFlyout.tsx

• Lines 62–91: add a new Field/Checkbox item (Headless UI) for "Focus on Needs Work" directly alongside the existing "Hide Completed" checkbox.

4. src/components/SubjectStandardDisplay.tsx

• Lines 117–119: extend the visibility guard from:

  if (hideCompleted && mastery === "completed") return null;

  to also handle:

  if (hideNotStarted && mastery !== "needs_improvement") return null;

  When hideNotStarted is true, only needs_improvement cards are rendered (this implicitly also hides completed items, so the two toggles can work independently or together).

---

Acceptance Criteria

• VisibilityContext exposes hideNotStarted: boolean and a setHideNotStarted setter
• hideNotStarted is initialized from localStorage on app load (key e.g. hideNotStarted)
• hideNotStarted is persisted to localStorage whenever it changes
• The Settings flyout contains a "Focus on Needs Work" checkbox that toggles hideNotStarted
• When enabled, only needs_improvement standards are visible; not_started and completed cards are hidden
• When disabled, behaviour reverts to the previous state (respecting hideCompleted independently)
• The two toggles (hideCompleted and hideNotStarted) are independently operable with no regressions
• The new checkbox matches the existing Headless UI Field/Checkbox styling used at lines 62–91 of SettingsFlyout.tsx

---

Suggested Labels

enhancement, good first issue