feat: pop-up menu and share page tweaks

[jessicaschilling]

In brief

A grab bag of small-but-helpful changes to IPFS Companion's pop-up menu and share page. This PR saves height of the pop-up overall and gets closer visually to browser-native menu appearance, but also clarifies usage (particularly for onboarding users) through repositioning/rewording items and adding additional info (values for "Copy" menu items!).

What's changed in the UI

Pop-up header

• Consolidate header area to bring on/off and prefs controls into a more universal (top right) location, and save space
• Make cube/IPFS wordmark combo closer in alignment with the global IPFS logo style overall
• Bring version number next to "IPFS" for clarity, to save space, and to emphasize the gateway/API/peers status info
• List peers first in status items list
• Adds hover titles for all items for increased clarity and beginner-friendliness
• Remove starfield background to make small text easier to read and to bring more into alignment with our gradual move to a "flatter" look

Pop-up menu

• Removes "Tools" title from tools menu, and moves tools menu above active tab menu
• Removes global gateway toggle per conversations with @olizilla and @lidel (don't panic, it's still in preferences page)
• Renames remaining tools menu items to "Quick Import/Share..." and "Go to My Node..." for clarity and to remove reference to Web UI
• Renames active tab menu title to "Current tab" and restyles for consistency with native/browser menu styling (Title Case, gray text)
• Makes menu text smaller throughout for consistency with native/browser menu styling
• Makes menu spacer line lighter gray for consistency with native/browser menu styling
• Makes menu items Title Case for consistency with native/browser menu styling (also cleans up native OS notifications for consistency of Title Case and sentence case)
• Adds option of helperText for all menu items, so it can be used for displaying truncated version of items to be copied (shareable link, content path, CID)
• Partially links helperText to those items' real values, but doesn't get all the way (see "still missing" below)

Share page

• Give share page title its own i18n message distinct from menu item title, for clarity

Still missing ... And also ...

• Copy helper text isn't dynamic! This info (shareable links, IPFS paths, CIDs to appear under "Copy ..." menu items) comes from copier.js, and I hit a wall with this one. @lidel or @olizilla -- might you be willing to update the placeholder text in this PR with real live info?
• Still a few changes to be made to i18n messages, for clarity in both prefs page and menu items around pinning and local gateway language -- but want to make these in a different PR to avoid merge conflict with style: Preferences page tweaks #903 now that's in master

Screenshots

"On" state for a DNSLink page, the most complex display scenario (L-R: Firefox before, Firefox after, Chrome after)

"Off" state (L-R: Firefox before, Firefox after, Chrome after)

Share page (L-R: Firefox before, Firefox after)

Issues resolved/partially resolved

This work draws from a variety of longstanding "discussion thread" issues and will close or partially close the following:

• [META] Upgraded UI for IPFS Companion #689
• Changing language around Redirects and Gateways #741

[jessicaschilling]

@lidel -- for review ... I hope I'm not trampling on your baby!

Bringing this back into WIP for a few more changes.

[jessicaschilling]

(Note: Some of this work will require changing text on the prefs page -- not doing that in this PR to avoid a merge conflict with prior prefs page changes. It's on my list though!)

[jessicaschilling]

Hi @lidel -- per our conversation, gently pushing this back over in your direction. Thank you for the review!

[lidel]

I wired up the hints, they look great!

Performance caveat when using without redirect

When local gateway is used, lookups are cheap, because data loaded in the tab is already on local IPFS Node

CID resolution is much more expensive when redirect is off (eg. when embedded js-ipfs is used).
In that scenario UI may freeze until IPFS node is able to resolve CID for current URL.

This may take from a few seconds to minutes, and means broken state like this (looks offline but in reality it is running):

I'll look into ways we can do CID resolution asynchronously, so its lack does ot block UI render.

[lidel]

@jessicaschilling I believe I finished implementing missing pieces – please take a quick look if I did not introduce any regression in UI.

---

FYSA I made CID resolution async so if it takes too long it does not block render of browser action popup.
That ensures smooth experience even when some things are slow.

Below is example of embedded js-ipfs taking long time to resolve DNSLink + traverse DAG to find CID of index.html presented in the browser:

(Feel free to tweak the hint for disabled state if needed)

[jessicaschilling]

@lidel I made a small change to the disabled-state message, but LGTM!

With the aim of not being too much of a burden to translators due to frequent changes, I added 4 small improvements to this PR. Please feel free to merge if you're OK with these.

1. Clarifies language around public/local gateways on prefs page and location bar (this may cause a minor merge conflict since prefs page has been updated prior to this branch, but an easy one to fix):
   

2. Standardizes page titles for welcome, prefs and share-file pages, because I just noticed that and it's annoying:

• Welcome | IPFS Companion
• Preferences | IPFS Companion
• Import & Share Files | IPFS Companion

3. Clarifies tool tip for "Pin IPFS Resource" ... please let me know if I've introduced any ambiguity/inaccuracy here:
   

4. Adds tool tips to all remaining pop-up menu items ... please let me know if I've introduced any ambiguity/inaccuracy here:
   

[lidel]

I resolved conflicts (preferring versions from this PR) and merged changes from master – might be worth taking a final look at Preferences as its now all up to date with your tweaks @jessicaschilling

[jessicaschilling]

@lidel - Thanks for the resolving the conflicts, and supplying better link-copy text. I think we're good to go here!

[lidel]

[Mithgol]

Removes global gateway toggle per conversations with @olizilla and @lidel (don't panic, it's still in preferences page)

Congratulations, y'all have just made some quick decisions (“Does the global gateway currently have a copy of this IPFS resource? Can I share its global URL in Telegram and expect Telegram to generate a preview under my message? Can I share its global URL in Twitter and expect Twitter to generate a Twitter Card under my message?”) significatly less quicker.

This toggle is not even on the first page of the preferences. It becomes necessary to scroll the preferences.

[lidel]

@Mithgol I make similar checks by opening IPFS resource in Incognito mode. That way you can check how resource loads from public gateway without the need to disable anything in IPFS Companion.

For a longer rationale, see my comment at #910 (comment) – hope this helps.