Framable (iframe); rebust responsiveness and refactored mobile view

[mondoreale]

Few things happened here:

1. The explorer can now be put inside an iframe and it'll behave as instructed (there are options).
2. The sidebar got redone so that it's responsive and doesn't break the layout even when the space is tight.
3. Explorer when loaded via iframe does not pollute host's history (odd thing in general) – lmk if you wanna know more.
4. Controls (incl. network selector) are now combined as a single layer, and respect each other's presence.

This and many many more improvements.

HUD options one can use to embed a perfect Explorer onto their site:

const Hud = {
  /**
   * Set `ConnectionMode.Always` on load.
   */
  showConnections: /*         */ 0x0001,
  /**
   * Show the connection mode toggle.
   */
  showConnectionsToggle: /*   */ 0x0002,
  /**
   * Show the node list for the current context (stream or selected node).
   */
  showNodeList: /*            */ 0x0004,
  /**
   * Show the network selector dropdown.
   */
  showNetworkSelector: /*     */ 0x0008,
  /**
   * Show the viewport reset button.
   */
  showResetViewportButton: /* */ 0x0010,
  /**
   * Show the search.
   */
  showSearch: /*              */ 0x0020,
  /**
   * Use tighter padding around the search and the controls.
   */
  compact: /*                 */ 0x0040,
  /**
   * Show zoom in and out buttons.
   */
  showZoomButtons: /*         */ 0x0080,
  /**
   * Fly to node on select.
   */
  autoCenter: /*              */ 0x0100,
} as const

Sum of desired options has to be passed via the ?hud= GET param.

For example, to open the explorer with

• on-select auto-center,
• compact padding, and
• just the zoom buttons, visit

http://localhost:3000/?hud=448

Devs can experiment with each of these in the Storybook (npm run storybook).