Clickable assignment titles

# Clickable assignment titles

In a class's Assignments tab, make each assignment title a link that opens an assignment overview page for that assignment — the same drilldown surface today's status-badge clicks land on, but with all four states (Submitted, Graded, Released, In Progress) accessible as tabs from one place.

## Problem

In the course view's Assignments tab, only the status-count badges are clickable. The title is plain text. That's fine for the "I need to grade X" use case, but a teacher who wants to inspect a single assignment as a whole — see who's done what across all states, switch between Submitted and Graded without backing out — has to click one badge, hit back, click the next badge, hit back. Each per-status drilldown is its own page with no peer-state navigation.

This is the "Assignment title click" use case explicitly deferred in [course-view.md](course-view.md). The screen the badge clicks already lead to is most of the way there; it just needs to be reachable by name and let the teacher move between status tabs without leaving.

## Goals

- Assignment titles in the Assignments table link to a per-assignment overview.
- The overview shows the same Submitted / Graded / Released / In Progress slices the badges already drill into, presented as tabs on one page.
- Default landing tab is **Submitted** (the most actionable state).
- Existing badge-click drilldown behavior keeps working — clicking the orange badge still lands directly on the Submitted tab, blue on Graded, etc.

## Non-goals

- Designing a richer assignment detail page (showing the prompt, rubric, full assignment content). That's still deferred; this spec is only about routing the title to the existing drilldown surface and unifying the four status drilldowns under tabs.
- Changing what each per-status list shows or how batch actions work (Grade with AI on Submitted, Release Grades on Graded). Those are owned by course-view.
- Editing or authoring the assignment from this page.
- Student-facing changes.

## Domain notes

- **Course** — the page is scoped to a single Course (the class the teacher is inside).
- **AssignmentType** — the "assignment" the title refers to. One row in the Assignments table = one AssignmentType active in this class.
- **Assignment** — per-student instances of that AssignmentType in this class. The tabs partition these by state.
- **Submission** — the Submitted / Graded / Released tabs operate on the most recent Submission per Assignment.
- **Document** — In Progress shows students with an active draft (Document exists, no Submission yet).

No state transitions are introduced by this spec; it's a navigation/layout change over the existing data.

## UX sketch

```
Assignments tab (clicking the title "Daily Pages: Year End Review"):
+------------------------------------------------------------------+
| Assignment              Due      In Prog  Submitted  Graded ...  |
| [Daily Pages: Year En…] May 19   3        [0]        [0]    ...  |
|  ^^^^^^^^^^^^^^^^^^^^^                                            |
|  link                                                             |
+------------------------------------------------------------------+
                              |
                              v
Assignment overview page:
+------------------------------------------------------------------+
| Grade 11 • Period 3                                              |
| St. Joe's Prep                                                   |
+------------------------------------------------------------------+
| < Back to assignments                                            |
|                                                                  |
| Daily Pages: Year End Review                                     |
| Daily Pages   Due 5/19/2026                                      |
|                                                                  |
| In Progress: 3   Submitted: 0   Graded: 0   Released: 0          |
|                                                                  |
| In Progress   [ Submitted ]   Graded   Released                  |
|               ──────────────                                     |
|                                                                  |
| [ Grade with AI ]                                                |
|                                                                  |
|     No ungraded submissions for this assignment.                 |
+------------------------------------------------------------------+
```

Behavior:

- The assignment title in the Assignments table renders as a link. Hover state matches other links in the class view.
- Clicking the title navigates to the assignment overview, landing on the **Submitted** tab by default.
- Clicking a count badge in the table still navigates to the same overview, but pre-selects the corresponding tab (orange → Submitted, blue → Graded, default counts → In Progress or Released depending on which column).
- A four-count summary row sits above the tabs showing In Progress / Submitted / Graded / Released totals for the assignment, so the teacher sees the whole shape of the work at a glance without needing an "Overview" tab. The summary numbers are not clickable — the tabs already do that job.
- Tab order follows the assignment lifecycle, left to right: **In Progress, Submitted, Graded, Released**. The default landing tab is still **Submitted** (the most actionable state) even though it's not the leftmost — the tab strip is for navigation, the default is for action.
- Tabs preserve the existing per-status drilldown bodies — same list, same checkboxes, same "Grade with AI" / "Release Grades" buttons.
- "Back to assignments" returns to the class's Assignments tab.
- Tab selection lives in the URL (e.g. `?tab=submitted`) so refresh and deep-link from badges both work.

Empty states per tab use the existing copy ("No ungraded submissions for this assignment.", etc.).

## Data model implications

None. This is a routing and layout change over the existing data. The tabs reuse the same loaders the current per-status drilldown routes use.

## File paths in `yawp-2.0` likely to change

Best-guess starting list. The new class view from [course-view.md](course-view.md) (PR #101) is the relevant baseline:

- `services/web-app/app/routes/app.my-classes.$courseId/components/assignments-table.tsx` — wrap the title cell in a link.
- `services/web-app/app/routes/app.my-classes.$courseId.$assignmentId/route.tsx` — new route for the assignment overview (or rework the existing drilldown route to host the tabbed layout).
- `services/web-app/app/routes/app.my-classes.$courseId.$assignmentId/components/assignment-overview-tabs.tsx` — new tab shell.
- Existing per-status drilldown components (`submitted-drilldown.tsx`, `graded-drilldown.tsx`, plus equivalents for Released and In Progress) — refactor from standalone routes into tab panels.
- Any current routes like `app.my-classes.$courseId.$assignmentId.submitted` etc. — collapse into the tabbed page, with `?tab=` taking over from path segments. Keep old paths as redirects for at least one release if they're linked from anywhere else.

Engineering should treat the PR #101 branch as ground truth and confirm the actual route names.

## Open questions

None currently. Decisions baked into the spec:

- **Scope** — applies only to assignment titles inside the class's Assignments tab, leading to a per-assignment overview. Dashboard "Classes at a Glance" badges and other surfaces are out of scope for this pass.
- **Overview surface** — no fifth "All" tab. A four-count summary row above the tab strip gives the at-a-glance picture instead.
- **Tab order** — lifecycle: In Progress, Submitted, Graded, Released. Default landing tab is Submitted.

## Edge cases

- Assignment with zero rows in every state (just created, no students started yet): all four tabs show their empty state. Default Submitted tab shows "No ungraded submissions for this assignment."
- Released-only assignment (every paper graded and released): Submitted, Graded, In Progress all empty; Released tab populated.
- Teacher loads the page via a badge link with a tab that's now empty (e.g. orange badge linked when count was 3, but another teacher graded them in the meantime): show the empty state for that tab; don't auto-redirect to a populated one.
- Long assignment titles in the table: truncate with ellipsis, full title visible on the overview page header.
- Archived class: same as the current Assignments tab — link still works but lists are read-only / actions disabled (inherit course-view behavior).
- Student-side: students never see the class Assignments tab; no change to student routes.

## Test plan

Manual QA:
- Click an assignment title in the Assignments tab → lands on the overview, Submitted tab selected.
- Click the orange Submitted badge → lands on the overview, Submitted tab selected.
- Click the blue Graded badge → lands on the overview, Graded tab selected.
- Switch tabs within the overview → list content updates; URL `?tab=` updates; browser back returns to the previous tab.
- "Back to assignments" returns to the class's Assignments tab with scroll position preserved if feasible.
- Grade with AI on the Submitted tab still works as it did in the standalone drilldown.
- Release Grades on the Graded tab still works as it did in the standalone drilldown.
- Refresh the page on the Graded tab → still on Graded tab after reload.
- Deep-link to `…/$assignmentId?tab=released` works from a fresh tab.

Integration:
- Render test: overview page with each tab as the default.
- Render test: each tab's empty state.
- Route test: legacy per-status paths redirect to the new tabbed page with the right `?tab=` value (if those paths existed and were linked externally).

## Rollout

Ships with or just after the new class view ([course-view.md](course-view.md), PR #101). Same feature flag as course-view — if course-view is gated, this lives behind the same gate; if course-view has shipped unflagged by then, this can follow directly. No separate flag.

## Engineering handoff checklist

- [x] Domain context covered
- [x] File paths in `yawp-2.0` listed
- [x] Data model implications spelled out (none required)
- [x] UX sketch in prose
- [x] Edge cases enumerated
- [x] Test plan written
- [ ] Rollout coordinated with course-view rollout