@Tsevener I'd recommend reaching toast design parity as the lowest priority element of this task. I'd recommend to start just getting as close as we can with our existing toast libraries without hacking anything together that feels unsustainable.

We support toast "tap" callbacks, so maybe a reasonable flow for an unwatched article could be:

1. User taps more toolbar button, taps Watch
2. API call is made for watchlist article subscription for permanent period of time
3. Toast is presented showing "Added to watchlist permanently". The toast is not "sticky" and will eventually dismiss on its own.
4. If the user taps the toast though, present modal action sheet for expiration time (it's ok if we force the toast to dismiss during this transition)
5. If the user taps anything that isn't cancel, API call to update expiry time, dismiss action sheet, and present same toast from step 3 with new expiration time and icon if needed.
6. If user taps cancel, just show article, no need to present the toast again.

The other element I'd recommend prioritizing lower than the other elements to start is tapping the watch button when logged out. My expectation would be if the user is not logged in, that tapping the watch button on an article would trigger the log in flow for them to then login, and on log in success start step 2 from above. I think this would be not too gross either hooking into our didLogInNotification notification or related delegate method somehow.

PR here - https://github.com/wikimedia/wikipedia-ios/pull/4573

One area of scope I cut (in addition to the pieces mentioned in the previous comment) is the watchlist half-filled star. For now I just show it either filled if the article is watched or unfilled if not watched. The reason for this is that I don't see a way to fetch the expiry status from the API, so I'm not able to tell when a user is only temporarily watching something for that icon status. I could keep some of the "half watched" state around in memory if they recently changed the expiry, but I would lose that state whenever they revisited the article, which could make it feel buggy.

Let me know if that's okay @scblr @Dmantena. I can kick off an Experimental build with this progress as well if you'd rather see it first before deciding.

Kicking this back so @Tsevener can incorporate changes from Robin

@scblr sorry for the delay on this - here are screenshots of what I showed off on Tuesday, in case you want to do some early design review. I will be using these toasts to incorporate the new flow.

@scblr After digging a bit, it's not really easily set up for you to play around with in Xcode. The css file I had mistakenly remembered for these old toasts is actually this JSON file, but it looks like all these values are overwritten in our wrapper class to work with themes in this area. So it's not as simple as adjusting those JSON values. You can just leave any toast design feedback here and I can see what I can do to incorporate it.

FYI @Tsevener, I updated the task’s description with the "1-year" option for the action sheet.

Thanks, @Tsevener – looks good in general. Also, from how it spatially behaves and feels. Great job! 👏 🌟

Some minor feedback on the toast’s presentation:

1) Apply the size and weight from the black text to the link (blue) text for more consistency:

2) Can the entire toast be one tap target? (navigating to the Watchlist). Tapping the toast sometimes dismisses it (likely triggers the close action).

3) Maybe this is what you mentioned earlier re: getting the state of Watchlist expiry might be difficult. Not sure, so I’ll mention it anyway: When selecting an impermanent Watch period (like 3 months in the example below), the toast and the item in the overflow menu should use the half-star (star.leadinghalf.filled) instead of the full star:

@scblr

1) Apply the size and weight from the black text to the link (blue) text for more consistency:

I checked earlier and they are the same size, I'll make them the same weight though.

2) Can the entire toast be one tap target?

I was having trouble with this earlier - our current toast system only only allows it to dismiss upon tap. It allows me to remove dismissing entirely, which removes the X, and automatically dismisses after a few seconds. But that felt frustrating to me since it covers the article toolbar, I had to wait for it to dismiss before using the toolbar again. I'll look deeper to see if there's anything I can do here.

3)

This is an API limitation unfortunately - when a user visits an article, I can only get a flag from the API on whether it's watched or not, I have no indication of temporarily watched to use the half star state. I could make it half star only immediately after they temporarily watched the article, but when they revisit the article it would have to switch back to fully filled. Since that would feel buggy I left it full star at all times. Let me know what you think or if Android was able to do this. Thanks!

@scblr New build with fixes for 1) and 2) coming - Experimental TestFlight 7.4.2 (31).

@scblr for 3) - I think I found the API information I need for this. I'll make another build with this fix.

@scblr - fixes for all will be in Experimental TestFlight 7.4.2 (32).

@scblr I added this same flow to the Diff screen as a part of this ticket, so feel free to look at that as well. We didn't originally do it in T335579 since Watchlist wasn't ready when Diff changes were released. I'll update the description here with that information.

Wow, great updates @Tsevener 🎯

I’ll look at the diff’s next. Here’s some additional feedback for the article watch/unwatch experience:

1) I noticed a small copy issue: Watchlist should use capitalization in the removal toast:

2) Maybe I’m completely wrong, but are these two pieces of text using the same font weight? It feels like the blue link text uses bolder text (maybe some kind of faux-bold)? Thanks for double-checking <3

3) Use sentence case here:

4) The space between toolbar items seems unevenly distributed. Can it be optimized?

5) Update this label to Article revision history:

{F37545664}

And here’s the promised feedback for the diff experience @Tsevener:

1) I’m using an iPhone 14 Pro with a width of 393dp. The diff comparison view should adapt to be side-by-side:

Implementation	vs	Design (Figma)

The "breakpoint" should probably be around iPhone 12/13 mini size: equal or smaller than 375dp. Not sure how it’ll behave with dynamic text, though, I’ll need your expertise on that one (maybe discuss async?).

2) Can we streamline these two headers regarding spacing, font-size, font-weight, and font-colors? It’ll make the transition from one the revision history to diff smoother. The reference should be the diff screen header:

3) Streamline all these labels to use one font-style and font-color, according to designs on Figma

Implementation	vs	Design (Figma)

4) Use a lighter color for these lines/borders:

It’s likely the base color group👇

5) Similar to what’s mentioned in T335816#9099165 – can we evenly distribute the space between items?

Implementation	vs	Design (Figma)

6) Lines/borders (same lines as mentioned in #4) between collapsible elements are missing (see Figma):

7) Update label to Article revision history (sentence case) here:

8) Make sure that the entire line is a tap target (not just the chevron)

Fixes for https://phabricator.wikimedia.org/T335816#9099165 will be in TestFlight Experimental build 35. @scblr Great catches!

@Tsevener just checked the changes in T335816#9099396. Looks good!

Here’s the last thing I noticed; not sure if it tangents your work in *this* task or if it’s something for T344453 👇

1) I noticed a label inconsistency in the diff view item. Can we change this label to Article revision history too? Also, make sure to use sentence case.

Thanks!

@scblr good catch - I'm going to put it in the description for T344453 since it's the diff screen. Thanks!

PR 2 for some Voice Over handling: https://github.com/wikimedia/wikipedia-ios/pull/4607

@ABorbaWMF Should be testable on TestFlight in main app target: Wikipedia 7.4.2 (Build 2654)

Looks good to me on 7.4.2 (Build 2654)