[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;

tools/playground/playground.css

@@ -79,6 +79,19 @@ body {
   margin: 5px;
 }
 
+.share-code {
+  position: relative;
+}
+
+.copied-notification {
+  font-size: x-small;
+  position: absolute;
+  bottom: -5px;
+  white-space: nowrap;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 /* TABBED EDITOR ****************************************/
 
 .tabbed-editor {

tools/playground/templates.xml

@@ -22,6 +22,7 @@
           </select>
           <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
           <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
+          <a class="btn flash share-code" t-on-click="shareCode" title="Copy a link to this playground"><span>Share</span><span class="copied-notification" t-if="state.copied">Copied link to clipboard!</span></a>
         </div>
         <TabbedEditor
             js="state.js"