mevebu 1.7.2 → 1.7.3

package/mevebu/app/mevebu.js

@@ -7,6 +7,7 @@ import {
   $, $$, el, icon, getFavorites, isFavorite, toggleFavorite, setTheme,
   modal, modalHead, button, copyButton, openPalette, shuffle, toolcard, blank,
   VERSION, PACKAGE_NAME, checkForUpdate, updateCommand, compareVersions, releaseUrl,
+  textInput, textArea, panel,
 } from "../libs/js/core.js";
 
 const DONATE_URL = "https://buymeacoffee.com/fastro";
@@ -754,28 +755,115 @@ function moreFromMev(tool) {
   );
 }
 
-function reportLink(tool) {
-  const title = `Bug in ${tool.name}`;
-  const body = [
-    "### What I was doing",
-    "<!-- one line is enough -->",
-    "",
-    "### What happened",
-    "",
-    "### What I expected",
-    "",
-    `### Tool`,
-    `mevebu ${VERSION}`,
-    `Page: #/${tool.category}/${tool.id}`,
-    "",
-    "### Browser",
-  ].join("\n");
-  return el("a", {
-    class: "mt-3 flex items-center gap-1.5 self-start text-2xs font-semibold text-ink-3 no-underline hover:text-ink-2",
-    href: `https://github.com/mevebu/mevebu/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`,
-    target: "_blank",
-    rel: "noopener",
-  }, icon("bug"), el("span", {}, "Report a problem"));
+// What the browser tells us about itself, without asking the user to retype it.
+// Every field can come back empty (a hardened browser, a private mode), so the
+// form still works when it does.
+function browserFacts() {
+  const ua = navigator.userAgent;
+  const browser = /Edg\//.test(ua) ? "Edge"
+    : /OPR\//.test(ua) ? "Opera"
+    : /Firefox\//.test(ua) ? "Firefox"
+    : /Chrome\//.test(ua) ? "Chrome"
+    : /Safari\//.test(ua) ? "Safari"
+    : "Unknown";
+  const version = (ua.match(new RegExp(browser + "\\/([\\d.]+)")) ?? [])[1] ?? "";
+  const platform = navigator.userAgentData?.platform
+    ?? (/Windows/.test(ua) ? "Windows" : /Mac OS X/.test(ua) ? "macOS"
+      : /Android/.test(ua) ? "Android" : /iPhone|iPad/.test(ua) ? "iOS"
+      : /Linux/.test(ua) ? "Linux" : "");
+  const screen = `${window.screen.width}x${window.screen.height} @${window.devicePixelRatio}x`;
+  return { browser: `${browser} ${version}`.trim(), platform, screen };
+}
+
+function openReport(tool) {
+  const facts = browserFacts();
+  const doing = textArea({ rows: 3, placeholder: "I was building a daily expression for a backup job." });
+  const happened = textArea({ rows: 3, placeholder: "The preview stayed empty when I typed 0 3." });
+  const expected = textArea({ rows: 3, placeholder: "I expected it to read \"03:00 every day\"." });
+  const browserField = textInput({ value: facts.browser });
+  const platformField = textInput({ value: [facts.platform, facts.screen].filter(Boolean).join(" · ") });
+  let opened = false;
+
+  const submit = button("Open GitHub issue", { icon: "external-link", kind: "fill" });
+  // The actions row renders outside the form, so the button names it explicitly.
+  submit.type = "submit";
+  submit.setAttribute("form", "report-form");
+  submit.disabled = true;
+  submit.setAttribute("aria-disabled", "true");
+  const validate = () => {
+    const ready = happened.value.trim().length > 0 && doing.value.trim().length > 0;
+    submit.disabled = !ready;
+    if (ready) submit.removeAttribute("aria-disabled");
+    else submit.setAttribute("aria-disabled", "true");
+  };
+  for (const area of [doing, happened]) area.addEventListener("input", validate);
+
+  const form = el(
+    "form",
+    {
+      id: "report-form",
+      class: "grid gap-3.5",
+      onsubmit: (event) => {
+        event.preventDefault();
+        if (opened || submit.disabled) return;
+        opened = true;
+        const body = [
+          "### What I was doing",
+          doing.value.trim() || "_not given_",
+          "",
+          "### What happened",
+          happened.value.trim() || "_not given_",
+          "",
+          "### What I expected",
+          expected.value.trim() || "_not given_",
+          "",
+          "### Where",
+          `- Tool: ${tool.name} (\`${tool.id}\`)`,
+          `- Page: #/${tool.category}/${tool.id}`,
+          `- mevebu: ${VERSION}`,
+          "",
+          "### Browser",
+          `- ${browserField.value || "unknown"}`,
+          `- ${platformField.value || "unknown"}`,
+        ].join("\n");
+        const title = `Bug in ${tool.name}`;
+        const href = `https://github.com/mevebu/mevebu/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`;
+        window.open(href, "_blank", "noopener");
+      },
+    },
+    panel("What were you doing?", doing),
+    panel("What happened?", happened),
+    panel("What did you expect?", expected, "Optional"),
+    el(
+      "div",
+      { class: "grid gap-3 rounded-r2 border border-orbit bg-deck-2 p-3.5" },
+      el("p", { class: "m-0 text-2xs text-ink-3" },
+        "Already filled in from this tab. Edit it if something is off."),
+      panel("Browser", browserField),
+      panel("Screen", platformField),
+    ),
+    submit
+  );
+
+  modal({
+    label: `Report a problem with ${tool.name}`,
+    panelClass: "m-auto w-[min(560px,100%)] p-[clamp(22px,3vw,28px)] max-h-[calc(100dvh-40px)] overflow-y-auto",
+    body: [
+      modalHead("flag", `Report a problem with ${tool.name}`),
+      el("p", { class: "m-0 text-sm text-ink-2" },
+        "Tell us what went wrong and the issue opens on GitHub with this page and browser already filled in."),
+      form,
+    ],
+    actions: [submit],
+  });
+}
+
+function reportButton(tool) {
+  return button("Report a problem", {
+    icon: "flag",
+    class: "mt-4",
+    onclick: () => openReport(tool),
+  });
 }
 
 async function toolPage(tool, category) {
@@ -788,7 +876,7 @@ async function toolPage(tool, category) {
     { class: PAGE_NARROW },
     benchHead(tool, category),
     slot,
-    el("div", { class: "flex flex-col items-stretch" }, reportLink(tool)),
+    el("div", { class: "flex flex-col items-start" }, reportButton(tool)),
     more
   );
 

package/mevebu/app/tailwind.css

@@ -301,6 +301,9 @@
   .mt-3\.5 {
     margin-top: calc(var(--spacing) * 3.5);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .mt-5 {
     margin-top: calc(var(--spacing) * 5);
   }
@@ -466,6 +469,9 @@
   .max-h-\[380px\] {
     max-height: 380px;
   }
+  .max-h-\[calc\(100dvh-40px\)\] {
+    max-height: calc(100dvh - 40px);
+  }
   .max-h-\[min\(60vh\,360px\)\] {
     max-height: min(60vh, 360px);
   }
@@ -520,6 +526,9 @@
   .w-\[min\(480px\,100\%\)\] {
     width: min(480px, 100%);
   }
+  .w-\[min\(560px\,100\%\)\] {
+    width: min(560px, 100%);
+  }
   .w-\[min\(640px\,100\%\)\] {
     width: min(640px, 100%);
   }
@@ -658,9 +667,6 @@
   .items-start {
     align-items: flex-start;
   }
-  .items-stretch {
-    align-items: stretch;
-  }
   .justify-between {
     justify-content: space-between;
   }
@@ -736,9 +742,6 @@
   .gap-y-3 {
     row-gap: calc(var(--spacing) * 3);
   }
-  .self-start {
-    align-self: flex-start;
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -926,6 +929,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-3\.5 {
+    padding: calc(var(--spacing) * 3.5);
+  }
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }

package/mevebu/libs/js/core.js

@@ -750,7 +750,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "1.7.2";
+export const VERSION = "1.7.3";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/icons.js

@@ -1,5 +1,5 @@
 // GENERATED FILE, DO NOT EDIT.
-// Source: lucide v1.59.0 (ISC), icons/169 names from scripts/vendor-icons.mjs
+// Source: lucide v1.59.0 (ISC), icons/173 names from scripts/vendor-icons.mjs
 // Regenerate with: npm run icons
 
 const D = {
@@ -13,6 +13,7 @@ const D = {
   "coffee": [ ["path", { d: "M10 2v2" }], ["path", { d: "M14 2v2" }], [ "path", { d: "M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1" } ], ["path", { d: "M6 2v2" }] ],
   "external-link": [ ["path", { d: "M15 3h6v6" }], ["path", { d: "M10 14 21 3" }], ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }] ],
   "corner-down-left": [ ["path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }], ["path", { d: "m9 10-5 5 5 5" }] ],
+  "flag": [ [ "path", { d: "M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528" } ] ],
   "info": [ ["circle", { cx: "12", cy: "12", r: "10" }], ["path", { d: "M12 16v-4" }], ["path", { d: "M12 8h.01" }] ],
   "circle-question-mark": [ ["circle", { cx: "12", cy: "12", r: "10" }], ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }], ["path", { d: "M12 17h.01" }] ],
   "circle-arrow-up": [ ["circle", { cx: "12", cy: "12", r: "10" }], ["path", { d: "m16 12-4-4-4 4" }], ["path", { d: "M12 16V8" }] ],
@@ -58,6 +59,9 @@ const D = {
   "loader": [ ["path", { d: "M12 2v4" }], ["path", { d: "m16.2 7.8 2.9-2.9" }], ["path", { d: "M18 12h4" }], ["path", { d: "m16.2 16.2 2.9 2.9" }], ["path", { d: "M12 18v4" }], ["path", { d: "m4.9 19.1 2.9-2.9" }], ["path", { d: "M2 12h4" }], ["path", { d: "m4.9 4.9 2.9 2.9" }] ],
   "play": [ [ "path", { d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" } ] ],
   "lock": [ ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }], ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4" }] ],
+  "wrench": [ [ "path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" } ] ],
+  "gauge": [ ["path", { d: "m12 14 4-4" }], ["path", { d: "M3.34 19a10 10 0 1 1 17.32 0" }] ],
+  "monitor": [ ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }], ["line", { x1: "8", x2: "16", y1: "21", y2: "21" }], ["line", { x1: "12", x2: "12", y1: "17", y2: "21" }] ],
   "calendar-days": [ ["path", { d: "M8 2v3" }], ["path", { d: "M16 2v3" }], ["rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }], ["path", { d: "M3 9h18" }], ["path", { d: "M8 13h.01" }], ["path", { d: "M12 13h.01" }], ["path", { d: "M16 13h.01" }], ["path", { d: "M8 17h.01" }], ["path", { d: "M12 17h.01" }], ["path", { d: "M16 17h.01" }] ],
   "graduation-cap": [ [ "path", { d: "M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" } ], ["path", { d: "M22 10v6" }], ["path", { d: "M6 12.5V16a6 3 0 0 0 12 0v-3.5" }] ],
   "calculator": [ ["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2" }], ["line", { x1: "8", x2: "16", y1: "6", y2: "6" }], ["line", { x1: "16", x2: "16", y1: "14", y2: "18" }], ["path", { d: "M16 10h.01" }], ["path", { d: "M12 10h.01" }], ["path", { d: "M8 10h.01" }], ["path", { d: "M12 14h.01" }], ["path", { d: "M8 14h.01" }], ["path", { d: "M12 18h.01" }], ["path", { d: "M8 18h.01" }] ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",