[IMP] playground: allow sharing playground links

This is useful to share editable snippets of owl code, which can be used
to paste a reproduction for a given issue or give someone an interactive
example of some feature.

tools/playground/app.js

@@ -226,6 +226,15 @@ class App extends owl.Component {
     this.downloadCode = debounce(this.downloadCode, 250, true);
     this.content = useRef("content");
     this.updateCode = this.updateCode.bind(this);
+    if (window.location.hash) {
+      try {
+        const { js, css, xml } = JSON.parse(atob(decodeURIComponent(window.location.hash.slice(1))));
+        if (![js, css, xml].every(item => typeof item === "string")) {
+          return;
+        }
+        Object.assign(this.state, { js, css, xml });
+      } catch {}
+    }
   }
 
   runCode() {
@@ -237,6 +246,18 @@ class App extends owl.Component {
     this.content.el.appendChild(subiframe);
   }
 
+  shareCode() {
+    const state = btoa(JSON.stringify({ js: this.state.js, css: this.state.css, xml: this.state.xml }));
+    const link = new URL(window.location.href);
+    link.hash = state;
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(link.href);
+      clearTimeout(this.state.copied)
+      this.state.copied = setTimeout(() => this.state.copied = null, 2000);
+    }
+    window.location.href = link.href;
+  }
+
   setSample(ev) {
     const sample = this.SAMPLES.find(s => s.description === ev.target.value);
     this.state.js = sample.code;