=== Overview
Build a prototype for the "Article queue" concept update to the the app and article navigation.
=== How does the "Article queue" concept differ from the current app?
This concept maintains the same navigational structure as the existing app but provides a prominent ‘landmark’ element to enable quickly returning to reading tab “queue”.
**Navigation structure:** {F18471664}
=== Proposed design
**Invision prototype:** https://wikimedia.invisionapp.com/public/prototype/sji0b12et0051rw018db4em1w
**Walkthrough:** https://docs.google.com/presentation/d/1zH_mGiJahl3z6wzuRZ5lAH-a4M0oneeIqkGESRs4aVM/edit#slide=id.g3b82d9366d_0_641
NOTE: **See [[ https://zpl.io/bPL0RX6 | Zeplin project ]] for redlined mocks, tagged with `Floating Article Queue ` **
==== App navigation (key changes from existing app)
- {T197100}
- T197811 Add floating queue element:
- Remove article tab icon from the Explore feed toolbar and make it a floating element visible across all bottom nav menu items when the Article view is minimized
- "Article queue" element shows a thumbnail from the top-most open tab
- There is a transition between the full article view when it is minimized to the "article queue" and vice versa
- New floating "article queue" element shows the exact number of tabs open [T150462]
- Remove the "Continue reading" card from Explore
- {T197812}
| Feed with floating article queue: {F18743798} | Feed scrolled down: {F18743878} | Feed scrolled back up: {F18743972} | Floating article queue over Nearby {F18743844}
==== Article view (key changes from existing app)
Besides the transition to the article queue element, make the following improvements the current tab interactions and behavior to enable easier switching between articles within the ‘queue’.
- **Update the article view's top and bottom toolbar elements:**
- Replace the "x" close icon with a bespoke "<W" icon on the top left which upon tapping minimizes the tab stack into the floating article queue element, and returns the user to the Explore Feed.
- Update the overflow actions to match mocks
- Bottom article toolbar updated so that all actions except ToC are aligned left with 24dp between each icon
- Move Font and theme changer from overflow actions to bottom article toolbar
- On scrolling down, app bar and and bottom article action bar animate off the screen
- **Update and amend article tabs design:**
- Simplify the tab structure from 3 separate elements per tab to a single layer per tab [T176014]
- Active tab body should scroll with tab headers [T112980] - this may be fixed by the above change
- Update the toolbar icons and overflow options in the "exploded tabs" view
- Ensure tabs are dismissable by swiping when in exploded tab view [T103955]
- Allow users to move between tabs when swiping left and right in the top toolbar area (similar to mobile browsers like Chrome) - see request on https://ticket.wikimedia.org/otrs/index.pl?Action=AgentTicketZoom;TicketID=10730591
- Show actual number of tabs open using an updated tab icon as background [T150462]
- When swiping down in the top toolbar area, expose all tabs (similar to mobile browsers like Chrome) [T113369]
- Add "Undo close tab" toast [T158082]
- {T197813}
| Article view {F18743824} | Article view overflow {F18743827} | Article scrolled: {F18743868} | Exploded tabs view {F18743830} | Exploded tabs overflow menu {F18743833}