From 263db0f6d5f59e28d92a45790f7feacf9898d87f Mon Sep 17 00:00:00 2001
From: Boshen <boshenc@gmail.com>
Date: Fri, 9 Jun 2023 22:08:52 +0800
Subject: [PATCH] feat(playground): add some styles

---
 website/index.html            |  1 +
 website/playground/index.html | 32 +++++++++++++++++++++-----------
 website/playground/index.js   | 20 ++++++++++++++++----
 3 files changed, 38 insertions(+), 15 deletions(-)
diff --git a/website/index.html b/website/index.html
index 470292b3a..fa1d30f61 100644
--- a/website/index.html
+++ b/website/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="The JavaScript Oxidation Compiler">
     <title>Oxc - The JavaScript Oxidation Compiler</title>
     <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/Boshen/oxc-assets/main/oxc.ico">
   </head>
diff --git a/website/playground/index.html b/website/playground/index.html
index 14bffaf28..7367e0d0d 100644
--- a/website/playground/index.html
+++ b/website/playground/index.html
@@ -3,42 +3,52 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Oxc - The JavaScript Oxidation Compiler</title>
+    <meta name="description" content="The JavaScript Oxidation Compiler Playground">
+    <title>Oxc - The JavaScript Oxidation Compiler Playground</title>
     <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/Boshen/oxc-assets/main/oxc.ico">
     <style>
       body { font-family: monospace; font-size: 16px; margin: 0 }
+      button { cursor: pointer }
+      label { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
       .cm-editor { height: 100%; }
+      #logo { display: flex; justify-content: center; }
+      #logo > img { margin-right: .5em; }
+      #loading { background: white; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; align-items: center; }
       #container { display: flex; height: 100vh; }
       #left { display: flex; flex: 1; flex-direction: column; border-right: 1px solid #444 }
       #editor { flex: 1; overflow-y: auto; }
       #panel { height: 300px; overflow-y: auto; padding: 1em; color: #d1d5da; background-color: #24292e; border-top: 1px solid #444!important; }
       #right { flex: 1; display:flex; flex-direction: column }
-      .controls { color: white; background: #24292e; padding: .5em; }
+      .controls { color: white; background: #24292e; padding: .8em 1em; border-bottom: 1px solid #444; display: flex; align-items: center; justify-content: space-between; }
       #viewer { flex: 1; overflow-y: auto; }
       #mangle { display: inline-flex; align-items: center }
-      #duration { float: right; }
-      label { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
     </style>
   </head>
   <body>
     <script type="module" src="./index.js"></script>
+    <div id="loading">Loading Wasm (~400kB)...</div>
 
     <div id="container">
       <div id="left">
         <div class="controls">
-          <label id="syntax">Check Syntax<input id="syntax-checkbox" type="checkbox" checked></label>
-          <label id="lint">Lint<input id="lint-checkbox" type="checkbox" checked></label>
+          <div id="logo"><img height="100%" width="20" src="https://raw.githubusercontent.com/Boshen/oxc-assets/main/oxc.ico" alt="logo"></img><span>Oxc</span></div>
+          <div>
+            <label id="syntax">Check Syntax<input id="syntax-checkbox" type="checkbox" checked></label>
+            <label id="lint">Lint<input id="lint-checkbox" type="checkbox" checked></label>
+          </div>
         </div>
         <div id="editor"></div>
         <div id="panel"></div>
       </div>
       <div id="right">
         <div class="controls">
-          <button id="ast">AST</button>
-          <button id="hir">HIR</button>
-          <button id="format">Format</button>
-          <button id="minify">Minify</button>
-          <label id="mangle">Mangle<input id="mangle-checkbox" type="checkbox"></label>
+          <div>
+            <button type="button" id="ast">AST</button>
+            <button type="button" id="hir">HIR</button>
+            <button type="button" id="format">Format</button>
+            <button type="button" id="minify">Minify</button>
+            <label id="mangle">Mangle<input id="mangle-checkbox" type="checkbox"></label>
+          </div>
           <span id="duration"></span>
         </div>
         <div id="viewer"></div>
diff --git a/website/playground/index.js b/website/playground/index.js
index c1db1b34e..dfac3b90a 100644
--- a/website/playground/index.js
+++ b/website/playground/index.js
@@ -90,7 +90,6 @@ class Playground {
     });
 
     const state = EditorState.create({
-      doc: "Loading Wasm... (~400kb)",
       extensions: [
         basicSetup,
         EditorView.lineWrapping,
@@ -109,7 +108,6 @@ class Playground {
                   message: d.message,
                 }))
               : [];
-            console.log(diagnostics);
             this.updatePanel(diagnostics);
             return diagnostics;
           },
@@ -183,13 +181,24 @@ class Playground {
 
   updatePanel(diagnostics) {
     const panel = document.getElementById("panel");
-    panel.innerText = diagnostics.map((d) => d.message).join("\n\n");
+    panel.innerText = diagnostics
+      .map((d) => {
+        const emoji = {
+          error: "❗",
+          warning: "⚠️",
+          advice: "ℹ️",
+        }[d.severity.toLowerCase()];
+        return `${emoji} ${d.message}`;
+      })
+      .join("\n\n");
     panel.scrollTop = panel.scrollHeight;
   }
 
   updateView(view) {
     view = view || this.currentView;
     this.currentView = view;
+
+    document.getElementById("mangle").style.visibility = "hidden";
     this.runOptions.format = false;
     this.runOptions.hir = false;
     this.runOptions.minify = false;
@@ -211,6 +220,7 @@ class Playground {
         text = this.oxc.formattedText;
         break;
       case "minify":
+        document.getElementById("mangle").style.visibility = "visible";
         this.runOptions.minify = true;
         this.run();
         text = this.oxc.minifiedText;
@@ -269,7 +279,7 @@ class Playground {
 
   static highlightMark = Decoration.mark({ class: "cm-highlight" });
   static highlightTheme = EditorView.baseTheme({
-    ".cm-highlight": { background: "black" },
+    ".cm-highlight": { background: "#3392FF44" },
   });
 
   // Highlight the editor by searching for `start` and `end` values.
@@ -404,6 +414,8 @@ async function main() {
     playground.editor.focus();
   }, 0);
 
+  document.getElementById("loading").remove();
+
   document.getElementById("ast").onclick = () => {
     playground.updateView("ast");
   };
