Pinning integration: Stub UI for Files screen

[jessicaschilling]

Note: This issue is part of a larger pinning service integration epic undertaken spring/summer 2020.

In brief

Stub out UI for Files screen of Web UI/Desktop, as follows:

• Create high-fidelity Figma document displaying all steps in process, including errors/modals/etc
• Build in the display (but not functionality) of new Files screen elements as depicted in Figma
• Add the minimum amount of interactivity required to be able to travel through the Files screen to demonstrate said elements

High-res screens as Figma doc are here.

[jessicaschilling]

@lidel and @rafaelramalho19 -- Updated Figma high-res screens can be found here. This includes redrawn screens from the original Pinning Summit concept mockups (adjusted for changes discussed in recent meetings), plus errors/exception/modal screens found along the way, to wit:

• Screen: Initial view of Files page with some files pinned in various ways
• Pop-up: "dots" menu for a totally unpinned file
• Pop-up: "dots" menu for a partially pinned file
• Pop-up: "dots" menu for a totally pinned file
• Screen: Files page with multiple files selected (displaying bottom menu)
• Modal: Pin/unpin selector
• Screen: Files pinned successfully (toast message)
• Screen: Files not successfully pinned (toast message)
• Screen: Pinning service connection failure (alert icons, toast message) — this wasn't discussed but I did find it when going through the PRD in more detail

NOTE: I'm not happy with the "pin status" icon, but wanted to throw it out there to illustrate the ramifications of different approaches to how we convey "all/some/none" in terms of pin status.

• If we want to keep "is this file pinned locally" something conveyed separately from "is this file pinned with none, some, or all of my pinning services", we have to convey five states in the iconography. (I'm not sure whether this is actually of enough value to try to convey in the icon, frankly.)
• If we only want to discern whether the file is pinned in no, some, or all places, we only have to convey two states in the iconography (some and all; none is implied by no icon at all).

Note that some of the new screens generated in creating this content also required additions to be made to the screens in #1501, so please have a quick look there as you're able.

Would appreciate feedback/discussion with you both before we take this wider. Thanks!

[jessicaschilling]

ETA: Considerable revisions to the document based on in-Figma comments. Icons are in a better situation; we still need to determine whether we'll be allowing manual pinning in this release.

Awaiting consensus from @rafaelramalho19 @lidel @momack2 but getting closer.

[lidel]

I don't think "manual pin" is a problem, we could implement it if the time allows, but can also remove it from V1 to reduce the scope of UIs to implement.

However, what is unclear to me is the cost of getting "pin status at remote service" for every file listed on Files screen. (would webui make the call to remote service, or would it be done by go-ipfs? would it be possible to request status for multiple CIDs in bulk? how do we handle lazy-loading of those states etc).

Worst case scenario: we could plan for eventuality in which the V1 only shows a local pin as it does today and remote pin status is fetched only when user explicitly check "pinning service modal" via the dot menu.

[jessicaschilling]

@rafaelramalho19 -- per planning discussion this morning, can you please prioritize work on this once 2.11 is released? We have agreed Figma files here: https://www.figma.com/file/4cYoTNbjnnV7I7qeOEhjg8/WebUI-Desktop-Pinning-Hi-Fi-Screens-Files?node-id=0%3A1

Please let me know if I can clarify anything. Thank you!

[lidel]

Notes from our discussion today:

• when user selects multiple items a bottom drawer is displayed with operations that could be applied to all of them
  • Q: should we support bulk pin control when multiple files are selected this way?
  • A: we could, but not in scope for MVP.
    • Rationale: this is additional work which needs more thought. We could either:
      • pin each selected item separately,
      • or we could follow logic used by Share action and create ephemeral directory that contains selected items and only pin the root CID

[jessicaschilling]

@lidel @rafaelramalho19 I've isolated the bottom-drawer implementation part in #1682 for future work.