//Corresponding task from "add a link": {T269644}//
---
When the user is in suggestions mode from {T289829}, but before they have selected "yes/no/skip", the image inspector should be open (unless they collapse it). The image inspector is the place where the action happens of accepting, rejecting, or skipping.
* **Location**
** The link inspector is a card at the bottom of the screen.
** When the user arrives on the page, it should animate in, like it is being "uncollapsed" per {T287404}.
* **Header**
** Starts with the robot icon.
** Copy TBD
** Should be collapsible as the link inspector is per {T287404}.
** Like the link inspector, the far right of the header has a "?" icon, which opens the help panel.
* **Content**
** Suggested image
*** The API will frequently provide multiple image suggestions. We should always offer the first one, which is the highest confidence one. For this iteration, we should ignore the other suggestions beyond the first one.
** Suggestion reason
*** The content starts with the suggestion reason. It should say one of these three things, depending on the source of the suggestion in the API. It should not have any prefix, i.e. it does not start with "Suggestion reason:" like in the mockups:
*** "Found on the same article in Czech, Norwegian, and Hebrew Wikipedia."
*** "Found in the Wikidata item for this article (strong match)."
*** "One of several images linked to the Wikidata item for this article."
** Image thumbnail
*** On the left under the suggestion reason.
*** Show a small version of the suggested image. It should always fit into the same horizontal rectangle, even if that means letterboxing it (like for a portrait-shaped image).
*** In the lower right of the thumbnail should be an icon to expand the image to fullscreen. The icon floats above the thumbnail with transparent gray, so you can still see the image underneath it.
*** This icon makes the image full screen. See {T290540}.
** Image metadata
*** On the righthand side of the thumbnail should be a set of image metadata from Commons.
*** It is still TBD exactly which metadata will be shown in this area. As a placeholder, let's do this:
**** Filename: in blue bold, including the extension (e.g. ".jpg"). It only has one line. At the end, should be the "open in another window" button. If the filename is too long, it should have a "...", but still have room for the "open in another window" button. That should all be a link to the Commons image page, e.g. https://commons.wikimedia.org/wiki/File:HMS_Pandora.jpg. When the user opens up that page, it should be in the display language that they were using on Wikipedia.
**** Description: below the filename, show as much of the description from Commons as will fit. If it is too long, it should be cut off with "..." This is not the "caption" -- it is the free text description that is entered along with almost every image. In future iterations, we may want to have fallback logic to display caption if description is unsatisfactory, or vice versa. But for this first iteration, we should just use description.
*** After the description, there should be a blue link that says "View details". This link should open the "image details dialog". See [TASK TO BE CREATED].
** Below the thumbnail, there should be text: "Add this image to the start of the article?"
* **Actions**
** At the bottom of the card are the action buttons.
** Yes: has a checkmark and the word "Yes". This button triggers the caption stage. See [TASK TO BE CREATED].
** No: has an X and the word "No". This button triggers the rejection dialog. See {T290046}.
** Skip: is not a button, but is just a dark grey link. This button just loads up the next suggestion from the user's suggested edits feed, just as if they had visited it by selecting it from the feed. If the user has no more suggestions in their feed, it should just bring them back to the suggested edits overlay on their homepage.
** When the user hits escape, the image inspector should be closed //and// the article's read mode is shown. This is different from default VE dialogs where these are separate actions (the first escape closes the dialog, leaves the user in edit mode and the second escape puts the article in read mode).
* **RTL**
** Note that the whole card should be flipped for RTL languages. In addition to the header and buttons, this would put the image thumbnail on the righthand side and the metadata on the left.
//Mockups as of 2021-08-30:// {F34626137}
**NOTE:** Refer to Figma for up-to-date detailed redline mocks and specs:
!!https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task-%5BGrowth%5D?node-id=2342%3A8050!!