#### Background
The iOS app in wikimedia needs to update the diff view that basically gives users the ability to view the differences between two versions of an article commonly known as - diff view. This feature is likely to get more visitors with the addition of the watchlist feature and therefore needs a revamp as the current version is outdated and does not provide users with a friendly user experience.
#### The Task
[ ] Create at least two variants for the diff view
[ ] Propose designs of what happens when you click each button within the design
[ ] Have design review of new diff view
[ ] Feature PM will decide on variant with feature designer and the designer will place final variant on task
#### Requirements
- Must include Undo, Thanks, Share, and Rollback
- Design should show rollback is a destructive action and shouldn’t be more as prominent as other options
- Diff should meet OOUI guidelines
- Diff should show the difference between what is being changed and what is not.
#### References
- [[ https://docs.google.com/presentation/d/1XnhtnsZxrVBgaV8byqR60Q6oGIDBdBuOI1_urGfhHPQ/edit#slide=id.g2238869534f_0_174 | iOS Watchlist Deepdive ]]
- [[ https://docs.google.com/presentation/d/1sx2MiDSpsVE90CjJFUwz_4G2ec8dc4N3lsG0-QvroLU/edit#slide=id.g230fbd6b3a7_0_26 | Patroller Tasks V1 Deep Dive ]]
- Screenshots of diff on Mobile Web and Desktop
#### Designs ([[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=176-9196&t=fMmP6Jl3TtqufVD7-4 | Figma ]])
⚠️ Please make sure to check [[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?type=design&node-id=176-9196&t=fMmP6Jl3TtqufVD7-4 | Figma ]] for the latest mocks, as the ones below might be outdated.
| **1)** Stacked design {F36992392} | **2)** Side-by-side design {F36992394} | **3)** Context menu {F36992396} | **4)** Undo (empty) {F36992399} | **5)** Undo (filled) {F36992401} | **6)** Thanks {F36992403} | **7)** Thanks (login) {F36992407} | **8)** More menu {F36992413} | **9)** Unwatch {F36992468} | **10)** Share {F36992418} | **11)** Rollback {F36992420}
**Notes:**
- The new diff design will replace the existing edit detail that’s used within the revision history
- The new diff design features:
- Content-focused design without (orange) boxes
- A bottom toolbar with a 'More' icon that reveals additional actions
- Tappable usernames (buttons)
- Article images (when available), like article talk pages
- Chevrons instead of "Show" and "Hide" labels
- Stacked and side-by-side view (1, 2)
- On smaller screens or when dynamic type is increased by the user, a stacked design (1) is used
- When there’s enough horizontal space, a side-by-side design is used (2). Breakpoint when the switch happens to be defined with engineers.
- Tapping the username reveals a context menu that leads to the user page (in-app web view), talk page (native), user contributions (in-app web view)
- Bottom toolbar:
- Next/previous: Navigating through edits works as currently implemented in the revision history
- Undo: Tapping the 'Undo' icon in the bottom toolbar reverts the edit. A dialog pops up with a mandatory text field (5)
- Thank: Tapping the 'Thank' icon works as currently implemented in the revision history (6, 7)
- More (8)
- More icon: Tapping the more icon reveals a context menu with secondary actions. It contains 'Unwatch' (when the article is on the user’s Watchlist), 'Share' (works as currently implemented in the revision history), and 'Rollback' (if the user has the necessary rights)
- Watch/unwatch (9)
- Unwatch triggers a toast with the following copy: `%articleName and talk page removed from Watchlist`
- Watch triggers a toast with the following copy: `Added to Watchlist permanently. Change expiration date?`
- Share (10): Reveals the native share sheet (works as currently implemented in the revision history)
- Rollback (11): For users with rollback rights. Triggers a dialog.