[MBL-19373] [S] Update to do screen design #3673

vargaat · 2025-10-01T08:48:54Z

What's new?

Re-introduced the new Todo list behind a local opt-in feature flag (for now).
Fixed app and tab badges not updating.
Limited item fetching interval from -28 to +28 days.
Updated cell design by re-using the widget cell with increased sizes and line counts not limited to one.
Added sticky day headers. I didn't re-use the widget one here.
Updated course name lookup logic to display the course's nickname and fall back to course code and original name if one of them is not available. This required new API and CoreData fields.
Updated empty state with a new panda. Also updated the panda previewer with pandas not yet added to it.
Updated date display on the todo cell not to display the day, only the hour because day information is already available in the sticky header.
Added a tap action to the sticky header that routes to the appropriate day on the calendar tab.
I also updated the widget preview to present better mock todo items.

refs: MBL-19373
builds: Student
affects: Student
release note: none

test plan:

Go to developer menu and enable the new_student_todo_screen feature flag.
Compare design with figma.
Check accessibility.
Check if everything is implemented that is in the ticket.

Screenshots

Before	After

Checklist

refs: MBL-19373 builds: Student affects: Student release note: none test plan: - Compare design with figma. - Check accessibility. - Validate proper grouping by dates.

inst-danger · 2025-10-01T09:05:25Z

	Warnings
⚠️	This pull request will not generate a release note.
⚠️	One or more files are below the minimum test coverage 50%
⚠️	The total test coverage is below the minimum 90%

Affected Apps: Student

Builds: Student

MBL-19373

Coverage	New %	Master %	Delta
Canvas iOS	79.76%	79.8%	-0.04%
Core/Core/Common/Extensions/Combine/SubjectExtensions.swift	0%	0%	0%
Core/Core/Features/Planner/Model/API/APICalendarEventSubAssignment.swift	0%	0%	0%
Core/Core/Features/Enrollments/GetEnrollments.swift	48.81%	48.81%	0%
Horizon/Horizon/Sources/Features/LearningObjects/Assignment/AssignmentDetails/View/LTIQuiz/OnAppear.swift	0%	0%	0%
Horizon/Horizon/Sources/Common/View/EmbeddedWebPage/HEmbeddedWebPageContainerViewModel.swift	0%	0%	0%
Horizon/Horizon/Sources/Features/LearningObjects/Assignment/AssignmentDetails/View/LTIQuiz/DidSubmitQuiz.swift	0%	0%	0%
Horizon/Horizon/Sources/Features/Inbox/Attachment/AttachmentViewModel.swift	0%	0%	0%
Horizon/Horizon/Sources/Features/Notebook/Common/Data/UpdateRedwoodNote.swift	0%	0%	0%
Horizon/Horizon/Sources/Features/LearningObjects/Assignment/AssignmentDetails/Data/SubmissionProperties.swift	0%	0%	0%
Horizon/Horizon/Sources/Common/Data/LearningObjectType.swift	0%	0%	0%

Generated by 🚫 dangerJS against 92cc847

inst-danger · 2025-10-01T11:02:59Z

Builds

Commit: Implement code review suggestions. Improve a11y. (92cc847)
Build Number: 560
Built At: Oct 15 12:50 CEST (10/15 04:50 AM MDT)

Student

suhaibabsi-inst

Code +1

suhaibabsi-inst · 2025-10-02T08:03:02Z

Core/Core/Features/Todos/View/TodoListScreen.swift

+            // Squeeze height to 0 so day badge goes next to cell.
+            .frame(height: 0, alignment: .top)


That's an interesting approach !

Kind of a hack that made this type of header implementation quite easy. The drawback is that when scrolling the next section up, it wont push out the previous section (since its height is 0) but just overlap it.

suhaibabsi-inst · 2025-10-02T08:22:24Z

QA +1 for all UI related features.

Though there is one performance issue while scrolling. See below

ScreenRecording_10-02-2025.11-10-32_1.MP4

Copilot

Pull Request Overview

This PR introduces a redesigned Todo list screen for the Student app, featuring improved visual design and functionality while maintaining the existing screen as a fallback behind a feature flag. The new design includes grouped todo items by day with sticky headers, enhanced visual elements using shared widget components, and improved course name handling logic.

Key changes:

Introduced new Todo screen design with sticky day headers and grouped items
Enhanced course name logic to display nicknames vs. course codes appropriately
Refactored widget components for reuse between widget and main app screens
Updated empty state with new vacation panda illustration

Reviewed Changes

Copilot reviewed 33 out of 33 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`TodoItemView.swift`	Simplified widget view to use shared content component
`TodoModel.swift`	Updated to use new TodoItemViewModel and enhanced preview data
`TodoListViewModel.swift`	Added day header navigation and empty state configuration
`TodoItemViewModel.swift`	New view model with enhanced course name logic and date formatting
`TodoGroupViewModel.swift`	New view model for day-grouped todo items
`TodoListScreen.swift`	Redesigned screen with sticky headers and grouped layout
`TodoItemContentView.swift`	New shared component for consistent todo item display
`TodoDayHeaderView.swift`	New sticky header component for day grouping
`Course.swift`	Added originalName property and nickname detection
`APICourse.swift`	Added original_name field to API model
Various test files	Updated tests to work with new view models and data structures

Core/Core/Features/Todos/Model/TodoInteractor.swift

balintbartok

QA + 1

suhaibabsi-inst

QA +1

The scrolling issue now is fixed 👍

ScreenRecording_10-13-2025.11-21-07_1.MP4

# Conflicts: # Core/CoreTests/Features/Todos/Model/TodoInteractorLiveTests.swift

rh12

Thanks for this work, nice solution for the day-headers!

Overall it looks good to me, I have some a11y comments, and some minor code-related comments (some of which are about spreading the word about existing helpers in the codebase :) )

Core/Core/Resources/Localizable.xcstrings

rh12 · 2025-10-14T11:19:38Z

Core/CoreTests/Features/Todos/Model/TodoInteractorLiveTests.swift


    override func setUp() {
        super.setUp()
+        Clock.mockNow(Self.mockDate)


Please add Clock.reset() in teardown

I didn't add because it's in the CoreTestCase's setUp method. Maybe also adding it to the tearDown would be appropriate.

rh12 · 2025-10-14T11:33:53Z

Core/Core/Features/Todos/View/TodoItemContentView.swift

+        .multilineTextAlignment(.leading)
+    }
+
+    private var contextSection: some View {


We could InstUI.JoinedSubtitleLabels instead of the HStack.
It has a divider which matches figma.
(I would say center aligning the icon looks better, but that's doable either way)

rh12 · 2025-10-14T12:54:28Z

Core/CoreTests/Features/Todos/ViewModel/TodoGroupViewModelTests.swift

+        let dateComponents = DateComponents(year: 2021, month: 8, day: 7, hour: 12)
+        let date = Calendar.current.date(from: dateComponents)!


Suggestion: Date.make() (same for the others)

rh12 · 2025-10-14T12:55:03Z

Core/CoreTests/Features/Todos/ViewModel/TodoGroupViewModelTests.swift

+
+        let group = TodoGroupViewModel(date: date, items: items)
+
+        XCTAssertTrue(group.accessibilityLabel.contains("Saturday"))


Suggestion: XCTAssertContains (same for the others)

rh12 · 2025-10-14T14:02:03Z

Core/Core/Features/Todos/ViewModel/TodoItemViewModel.swift

+        self.htmlURL = plannable.htmlURL
+
+        self.color = plannable.color.asColor
+        self.icon = Image(uiImage: plannable.icon)


Suggested change

self.icon = Image(uiImage: plannable.icon)

self.icon = plannable.icon.asImage

rh12 · 2025-10-14T14:06:16Z

Core/CoreTests/Features/Todos/Model/TodoInteractorLiveTests.swift

+            // Check second group (tomorrow)
+            let secondGroup = todoGroups[1]
+            XCTAssertEqual(secondGroup.items.count, 1)
+            XCTAssertEqual(secondGroup.items[0].title, "Quiz 1")


suggestion: using first/last instead of [0]/[1] to ensure the test doesn't crash, just fails (even though CI ignores the crash, it stops execution locally)

rh12 · 2025-10-14T14:10:40Z

Core/CoreTests/Features/Todos/ViewModel/TodoListViewModelTests.swift

-        // When
-        interactor.refreshResult = .success(false)
+        // When - with non-empty todos
+        interactor.refreshResult = .success(())


Suggested change

interactor.refreshResult = .success(())

interactor.refreshResult = .success

rh12 · 2025-10-14T14:13:41Z

Core/Core/Features/Todos/View/TodoItemContentView.swift

+                .foregroundStyle(item.color)
+                .accessibilityHidden(true)
+                .frame(maxHeight: .infinity, alignment: .top)
+                .padding(.top, isCompactLayout ? 0 : 2)


Why do we need this extra padding?

The widget and the in-app todo rows use different font heights and for a one liner todo title this offset gave the best vertical centering effect. I modified the logic to scale this with font scale, now the text is centered with the first line of the text most of the time.

rh12 · 2025-10-14T14:29:44Z

Core/Core/Features/Todos/View/TodoItemContentView.swift

+    }
+
+    private var titleSection: some View {
+        VStack(alignment: .leading) {


This should have the same spacing as the main vstack here, which is zero at the moment.
(It is usually 2, maybe figma does not have this by mistake)

Right, the huge spacing felt strange but since I copied I guessed that's the correct. I modified the logic to have 0 spacing for the widget (compact layout) and 2 points for the in-app cell.

vargaat · 2025-10-15T10:42:16Z

@rh12 I implemented your suggestions, now the screen properly displays even at the largest a11y size 🥳

vargaat added 20 commits September 26, 2025 15:16

Introduce temporary feature flag.

086a2be

Remove isEmpty state publishing.

92a4f83

Add tab and application badge update logic.

292f4f9

Use +-28 days interval for todo fetching.

5c2ac15

Use local env variable for fetching.

1feaef4

Extract todo cell content view to Core.

7a4813a

Update todo item layout.

dbc7b04

Use shared todo cells for widget and todo screen.

9d217cc

Add sticky day headers.

892aaf9

Update layout.

cbbe33b

Route to calendar when tapping on the day header.

7a17678

Improve a11y.

7ac197a

Move entities to the view model level.

4ee2924

Continue renaming.

3a9c5c1

Move sorting logic to view model entities.

b8d723f

Update unit tests.

74c390b

Update layout.

6bed69e

Display only time

e45f352

refs: MBL-19373 builds: Student affects: Student release note: none test plan: - Compare design with figma. - Check accessibility. - Validate proper grouping by dates.

Update empty state.

474f0c4

Update course name lookup logic.

d63b8c6

vargaat self-assigned this Oct 1, 2025

vargaat requested review from rh12 and suhaibabsi-inst as code owners October 1, 2025 08:48

Merge branch 'master' into feature/MBL-19373-Update-ToDo-Screen

9cb87cf

Update public previews.

465b4b6

suhaibabsi-inst reviewed Oct 2, 2025

View reviewed changes

Update dividers for better section scrolling experience.

7e0273c

vargaat added 2 commits October 3, 2025 09:58

Merge branch 'master' into feature/MBL-19373-Update-ToDo-Screen

da84fa7

Fix flaky test.

80a6c59

vargaat requested review from balintbartok and szabinst October 6, 2025 13:14

balintbartok requested a review from Copilot October 7, 2025 08:44

Copilot AI reviewed Oct 7, 2025

View reviewed changes

Core/Core/Features/Todos/Model/TodoInteractor.swift Outdated Show resolved Hide resolved

instructure deleted a comment from Copilot AI Oct 7, 2025

balintbartok previously approved these changes Oct 7, 2025

View reviewed changes

Optimize course lookup.

38b1433

vargaat dismissed balintbartok’s stale review via 38b1433 October 7, 2025 13:14

vargaat requested a review from suhaibabsi-inst October 13, 2025 07:58

suhaibabsi-inst previously approved these changes Oct 13, 2025

View reviewed changes

Merge branch 'master' into feature/MBL-19373-Update-ToDo-Screen

07d850d

# Conflicts: # Core/CoreTests/Features/Todos/Model/TodoInteractorLiveTests.swift

vargaat dismissed suhaibabsi-inst’s stale review via 07d850d October 14, 2025 11:51

rh12 reviewed Oct 14, 2025

View reviewed changes

Implement code review suggestions. Improve a11y.

92cc847

		// Squeeze height to 0 so day badge goes next to cell.
		.frame(height: 0, alignment: .top)

		let dateComponents = DateComponents(year: 2021, month: 8, day: 7, hour: 12)
		let date = Calendar.current.date(from: dateComponents)!


		let group = TodoGroupViewModel(date: date, items: items)

		XCTAssertTrue(group.accessibilityLabel.contains("Saturday"))

	self.icon = Image(uiImage: plannable.icon)
	self.icon = plannable.icon.asImage

	interactor.refreshResult = .success(())
	interactor.refreshResult = .success

[MBL-19373] [S] Update to do screen design #3673

Are you sure you want to change the base?

[MBL-19373] [S] Update to do screen design #3673

Uh oh!

Conversation

vargaat commented Oct 1, 2025 • edited by balintbartok Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's new?

Screenshots

Checklist

Uh oh!

inst-danger commented Oct 1, 2025 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Affected Apps: Student

Builds: Student

Uh oh!

inst-danger commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Builds

Uh oh!

suhaibabsi-inst left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

suhaibabsi-inst commented Oct 2, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

balintbartok left a comment

Choose a reason for hiding this comment

Uh oh!

suhaibabsi-inst left a comment

Choose a reason for hiding this comment

Uh oh!

rh12 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vargaat Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

vargaat commented Oct 1, 2025 •

edited by balintbartok

Loading

inst-danger commented Oct 1, 2025 •

edited by atlassian bot

Loading

inst-danger commented Oct 1, 2025 •

edited

Loading

vargaat Oct 14, 2025 •

edited

Loading