Make pinning hashes more intuitive

[olizilla]

Right now, the pin hash feature requires the user to enter an optional title and a hash and click the check mark to confirm.

It's not obvious from the UI that the user needs to fill anything out in the green bar.

We can make this more intuitive by:

• Make it look more like a form. Use a less saturated background color, and add some framing to the input fields with a per input background color and/or border.
• Use a muted color for the placeholder text.
• Indicate required and optional fields.
• Change the placeholder text to show example content
  • title: My favourite pin
  • hash: QmHash...

As the title is optional, to make the action feel simpler, we could simply let the user enter a hash, pin it, and then make it easy for them to add a label while it's pinning.

If you try to pin a hash you already have pinned, we should informed the user, and scroll to the item in the list. Right now the new pin name (or empty name) overwrites any existing label you might have.

To be able to label an unlabelled pinned hash the user needs a way of previewing or opening the file to see what it is.

The add pin icon might be more intuitive in the top right corner, as a button with text for "Add". This applies to the "Add files" action on the files pane too.

[olizilla]

Of note, this is a useful data point for https://github.com/ipfs-shipyard/ipfs-ui-style-guide as it should define some of these things

[hacdias]

Hey @olizilla! You're right: the current interface is not the best and doesn't speak for itself. Would you mind to do some kind of sketch to show the way you think the form should be? 😄

[hacdias]

@olizilla any updates on this? 😄

[lidel]

I suggest wait for canonical icons for pin actions: ipfs-inactive/ipfs-ui-style-guide#3 (comment)

[nothingismagick]

The checkmark and the green color together make it seem like it was successful before the user even interacts. It always makes me pause when I see it.

[lidel]

Ditto. Let's create better UI for pinning!
Ideas and examples of apps with good UI are welcome at:

• Design: Pinning Content [META] Solidify mental model/language for MFS add vs IPFS pin ipfs-gui#10

[hacdias]

Closing as unrelated to the newer version.