refactor(ui): align detail popups with the documented property hierarchy

[tiankaima]

Goal

Make the homework and todo detail popups follow the layout and property hierarchy already documented in docs/contracts/, and fix the close control that rendered its accessible label as visible text next to the X icon.

What the documentation requires

• docs/contracts/homework.json — both homework popups specify the order description, due summary, vertical metadata excluding platform createdAt, action controls, discussion, with discussion to the right of the details on desktop.
• docs/contracts/_ui.json "Model Property Priority" — the due time, completion status and primary action state are primary; course/semester/short metadata are secondary; raw timestamps and repeated parent objects are tertiary and must be de-emphasized.
• docs/contracts/homework.json compact-card-list-surface — standard/default homework never gets a badge of its own.
• docs/contracts/_ui.json "Layout Principles" — reading-first content in the main column, structured facts alongside it, stacked in the same order on mobile.

Changed Surfaces

• src/lib/components/DetailDialog.svelte — shared popup shell: header with title and an optional subtitle, scrollable body, optional discussion column on the right that stacks below on mobile. No pinned footer, because the documented order keeps action controls inside the details stream.
• src/features/homeworks/lib/homework-detail-meta.ts — pure builders for the due summary (due date, completion status, relative label), the vertical metadata rows (publication date and submission opening only; due date and platform createdAt excluded) and the attribute chips.
• src/features/homeworks/components/HomeworkDueSummary.svelte, HomeworkMetaList.svelte, HomeworkDetailTags.svelte — renderers giving the due date primary weight and the raw timestamps compact muted rows.
• Section homework popup — description, due summary, vertical metadata, chips, edit/completion/delete controls, discussion on the right. The header no longer repeats the course name, which the page heading already shows.
• Workspace homework popup — same order; the course stays in the subtitle because it is the disambiguating context in a cross-section list.
• Todo popup — same reading order with the priority as a metadata row.
• sectionHomeworkStatus removed: the section popup was labelling incomplete homework with the "standard homework" tag as if it were a status. Completion status now uses the existing completedLabel / filterIncomplete copy in both locales.
• Both homework popups pass heading to CommentsPanel so the discussion heading matches catalog and section pages.
• Shared dialog and sheet close controls — icon plus aria-label, no visible label text.

Evidence

Local Postgres was installed and seeded so the browser-backed suites could actually run.

• bunx svelte-check --tsconfig ./tsconfig.json — 0 errors (13 pre-existing warnings in unrelated files)
• bunx tsc --noEmit for all three typecheck configs — pass
• bunx biome check — pass
• bunx vitest run — 326 files, 2034 tests pass
• bun run openapi:check, GraphQL SDL snapshot, bunx wrangler types --check, bun run build — pass
• Playwright against the Worker: sections/[jwId], dashboard/** and comments/** — 118 tests pass, covering the new popup specs plus the existing homework CRUD, completion, comment and permalink flows

tests/e2e/utils/detail-dialog.ts asserts the documented order directly: the due summary must render above the metadata list, the metadata list must not repeat the due date or expose a creation timestamp, action controls must live in the details column, and the close control must expose an accessible name with no visible text. Unit tests cover the builders, including that standard homework produces no chip.

Section homework popup and workspace homework popup:

Section homework detail popup
Workspace homework detail popup

Todo popup and mobile stacking:

Todo detail popup
Section homework popup on a 390px viewport

Docs / Contracts

No contract changes: this brings the UI in line with the existing homework.json and _ui.json specifications. No new copy — the completion-status labels already existed in both locales. dueLabel and filterIncomplete were added to copy types for messages that already shipped.

Risk Areas

The section popup is shared by read, edit, completion, delete, audit-history and comment flows; permissions and handlers are unchanged and those flows are covered by the passing E2E suites. Removing sectionHomeworkStatus also removed its plumbing through the section dialog chain.

Cleanup

Temporary preview routes and servers were removed; no generated files were hand-edited.

_{To show artifacts inline, enable in settings.}

  

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	life-ustc	2a525e0	Aug 08 2026, 04:07 PM

[github-actions]

E2E HTML report is ready: https://life-ustc.github.io/e2e-snapshot-artifacts/reports/31266138157/index.html
All reports: https://life-ustc.github.io/e2e-snapshot-artifacts/