Show the number of errors and warnings in the Problems tab's title

src/ConsolePanel.res

@@ -25,9 +25,11 @@ let make = (~logs, ~appendLog) => {
     <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("Console")} </h2>
     {switch logs {
     | [] =>
-      React.string(
-        "Add some 'Console.log' to your code and click 'Run' or enable 'Auto-run' to see your logs here.",
-      )
+      <p className="p-4 max-w-prose">
+        {React.string(
+          "Add some 'Console.log' to your code and click 'Run' or enable 'Auto-run' to see your logs here.",
+        )}
+      </p>
     | logs =>
       let content =
         logs

src/Playground.res

@@ -1334,6 +1334,56 @@ module InitialContent = {
   }
 }
 
+module App = {
+  @react.component
+  let make = () => {
+    let (count, setCount) = React.useState(() => 0)
+    let (username, setUsername) = React.useState(() => "Anonymous")
+
+    <div>
+      {React.string("Username: ")}
+      <input
+        type_="text"
+        value={username}
+        onChange={event => {
+          event->ReactEvent.Form.preventDefault
+          let eventTarget = event->ReactEvent.Form.target
+          let username = eventTarget["value"]
+          setUsername(_prev => username)
+        }}
+      />
+      <button
+        onClick={_evt => {
+          setCount(prev => prev + 1)
+        }}>
+        {React.string("Click me")}
+      </button>
+      <button onClick={_evt => setCount(_ => 0)}> {React.string("Reset")} </button>
+      <CounterMessage count username />
+    </div>
+  }
+}
+`
+
+  let since_11 = `module CounterMessage = {
+  @react.component
+  let make = (~count, ~username=?) => {
+    let times = switch count {
+    | 1 => "once"
+    | 2 => "twice"
+    | n => Int.toString(n) ++ " times"
+    }
+
+    let name = switch username {
+    | Some("") => "Anonymous"
+    | Some(name) => name
+    | None => "Anonymous"
+    }
+
+    <div> {React.string(\`Hello \$\{name\}, you clicked me \` ++ times)} </div>
+  }
+}
+
 module App = {
   @react.component
   let make = () => {
@@ -1416,7 +1466,7 @@ let make = (~versions: array<string>) => {
   | (None, _) =>
     switch initialVersion {
     | Some({major: 10, minor}) if minor >= 1 => InitialContent.since_10_1
-    | Some({major}) if major > 10 => InitialContent.since_10_1
+    | Some({major}) if major > 10 => InitialContent.since_11
     | _ => InitialContent.original
     }
   }
@@ -1666,16 +1716,14 @@ let make = (~versions: array<string>) => {
     | Problems => "Problems"
     | Settings => "Settings"
     }
-    let onMouseDown = evt => {
+    let onClick = evt => {
       ReactEvent.Mouse.preventDefault(evt)
       ReactEvent.Mouse.stopPropagation(evt)
       setCurrentTab(_ => tab)
     }
     let active = currentTab === tab
-    // For Safari iOS12
-    let onClick = _ => ()
     let className = makeTabClass(active)
-    <button key={Int.toString(i) ++ ("-" ++ title)} onMouseDown onClick className disabled>
+    <button key={Int.toString(i) ++ ("-" ++ title)} onClick className disabled>
       {React.string(title)}
     </button>
   })

src/RenderPanel.res

@@ -4,9 +4,11 @@ let make = (~validReact) => {
     <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("React")} </h2>
     {validReact
       ? React.null
-      : React.string(
-          "Create a React component called 'App' if you want to render it here, then click 'Run' or enable 'Auto-run'.",
-        )}
+      : <p className="p-4 max-w-prose">
+          {React.string(
+            "Create a React component called 'App' if you want to render it here, then click 'Run' or enable 'Auto-run'.",
+          )}
+        </p>}
     <div className={validReact ? "h-full" : "h-0"}>
       <EvalIFrame />
     </div>