feat(examples): improve api example, closes #1535 (#1957)

examples/api/src/App.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte";
+  import { writable } from "svelte/store";
   import hotkeys from "hotkeys-js";
   import { open } from "@tauri-apps/api/shell";
   import { invoke } from "@tauri-apps/api/tauri";
@@ -73,25 +74,31 @@
 
   let selected = views[0];
 
-  let responses = [""];
+  let responses = writable([]);
+  let response = ''
 
   function select(view) {
     selected = view;
   }
 
   function onMessage(value) {
-    responses += typeof value === "string" ? value : JSON.stringify(value);
-    responses += "\n";
+    responses.update(r => [`[${new Date().toLocaleTimeString()}]` + ': ' + (typeof value === "string" ? value : JSON.stringify(value)), ...r])
   }
 
   function onLogoClick() {
     open("https://tauri.studio/");
   }
+
+  onMount(() => {
+    responses.subscribe(r => {
+      response = r.join('\n')
+    })
+  })
 </script>
 
 <main>
   <div class="flex row noselect just-around" style="margin=1em;" data-tauri-drag-region>
-    <img src="tauri logo.png" height="60" on:click={onLogoClick} alt="logo" />
+    <img class="logo" src="tauri logo.png" height="60" on:click={onLogoClick} alt="logo" />
     <div>
       <a class="dark-link" target="_blank" href="https://tauri.studio/en/docs/getting-started/intro">
         Documentation
@@ -121,9 +128,9 @@
     <p class="flex row just-around">
       <strong>Tauri Console</strong>
       <a class="nv" on:click={()=> {
-        responses = [""];
+        responses.update(() => []);
         }}>clear</a>
     </p>
-    {responses}
+    {@html response}
   </div>
 </main>

examples/api/src/components/Cli.svelte

@@ -9,6 +9,15 @@
 </script>
 
 <div>
+  This binary can be run on the terminal and takes the following arguments:
+  <ul>
+    <li>--config PATH</li>
+    <li>--theme light|dark|system</li>
+    <li>--verbose</li>
+  </ul>
+  Additionally, it has a <i>update --background</i> subcommand.
+  Note that the arguments are only parsed, not implemented.
+  <br>
   <button class="button" id="cli-matches" on:click={cliMatches}>
     Get matches
   </button>

examples/api/src/components/Http.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getClient, Body } from "@tauri-apps/api/http";
   let httpMethod = "GET";
-  let httpUrl = "";
+  let httpUrl = "https://jsonplaceholder.typicode.com/todos/1";
   let httpBody = "";
 
   export let onMessage;