Merge pull request #7 from rgwood/termwiz

Use Termwiz, display colours, use icons

Cargo.toml

@@ -13,29 +13,26 @@ license = "MIT"
 anyhow = "1.0.70"
 crossterm = "0.27.0"
 portable-pty = "0.8.1"
-vte = "0.13.0"
 
 axum = { version = "0.7.4", features = ["macros", "ws"] }
 serde = { version = "1.0.159", features = ["derive", "rc"] }
 serde_json = "1.0.95"
 tokio = { version = "1.27.0", features = ["full"] }
 clap = { version = "4.2.1", features = ["derive"] }
-itertools = "0.12.1"
 rust-embed = { version = "8.2.0", features = ["axum-ex"] }
 mime_guess = "2.0.4"
 open = "5.0.1"
 rand = "0.8.5"
 signal-hook = "0.3.15"
+termwiz = "0.22.0"
+ansi_colours = "1.2.2"
+iconify = "0.2.6"
 
 [profile.release]
 lto = true      # Enable Link Time Optimization
 opt-level = 'z' # Optimize for size.
 panic = 'abort' # Abort on panic
 
-[dev-dependencies]
-insta = { version = "1.29.0", features = ["yaml"] }
-serde_yaml = "0.9"
-
 
 # codegen-units = 1 # Set low to increase optimizations. Kills compile time though
 # strip = true        # Strip symbols from binary. Big gains but idk if it's worth bad stack traces

embed/script.js

@@ -17,30 +17,42 @@ url.protocol = url.protocol.replace("http", "ws");
 
 let events = [];
 
+function showTooltip(event) {
+  const tooltip = document.querySelector('#tooltip');
+  tooltip.style.display = 'block';
+  update(event.target);
+}
+
 function Event(props) {
   let dto = props.dto;
   const shared_classes = "w-fit outline outline-1 rounded-sm px-1 m-1 bg-slate-800"
   switch (dto.type) {
     case "Print":
-      return html`<span>${dto.string}</span>`;
+      if (!!dto.color && !!dto.bg_color) {
+        return html`<span style="color: ${dto.color} background-color: ${dto.bg_color}">${dto.string}</span>`
+      } else if (!!dto.color) {
+        return html`<span style="color: ${dto.color}">${dto.string}</span>`
+      } else if (!!dto.bg_color) {
+        return html`<span style="background-color: ${dto.bg_color}">${dto.string}</span>`
+      } else {
+        return html`<span>${dto.string}</span>`;
+      }
     case "GenericEscape": {
       let border = !!dto.tooltip ? "outline-blue-400" : "outline-slate-400";
-
-      let showTooltip = (event) => {
-        const tooltip = document.querySelector('#tooltip');
-        tooltip.style.display = 'block';
-        update(event.target);
-      }
-      return html`<span
+      let svg = dto.icon_svg ? html`<span class="inline-block align-middle" dangerouslySetInnerHTML=${{ __html: dto.icon_svg}}/>` : html``;
+      let title = dto.title ? html`<span>${dto.title}</span>` : ``;
+      return html`<div
         data-tooltip=${dto.tooltip}
         data-rawbytes=${dto.raw_bytes}
         onmouseenter=${showTooltip}
         onmouseleave=${hideTooltip}
         onfocus=${showTooltip}
         onblur=${hideTooltip}
-        class="inline-block ${shared_classes} ${border} "
-        >${dto.title}</span
-      >`;
+        class="inline-block ${shared_classes} ${border} space-x-1"
+        >
+          ${svg}
+          ${title}
+        </div>`;
     }
     case "LineBreak": {
       return html`