feat(gnoweb): improve help page (#3362)

Adds JavaScript features listed #3355 regarding Help section in gnoweb.

- Adds localStorage feature for address
- Fixes txlink
- Minor UI styles

Author: alexiscolin

gno.land/pkg/gnoweb/components/help.gohtml

@@ -69,7 +69,7 @@
                   {{ range .Params }}
                     <div class="flex flex-col gap-3 items-stretch text-gray-400 mb-2">
                       <div class="group relative overflow-hidden flex w-full border rounded-sm has-[:focus]:border-gray-300 hover:border-gray-300">
-                        <label for="func-{{ $funcName }}-param-{{ .Name }}" class="flex gap-3 items-center bg-gray-50 px-4 font-semibold text-gray-600">{{ .Name }}</label>
+                        <label for="func-{{ $funcName }}-param-{{ .Name }}" class="flex gap-3 items-center bg-gray-50 px-4 font-semibold text-gray-600 text-100">{{ .Name }}</label>
                         <input type="text"
                           {{- if eq $data.SelectedFunc $funcName }}
                             value="{{ getSelectedArgValue $data . }}"

gno.land/pkg/gnoweb/components/index.gohtml

@@ -64,7 +64,7 @@
 {{ end }}
 
 {{ define "header" }}
-<header class="main-header sticky top-0 bg-light border-b border-gray-400 text-100 z-max">
+<header class="main-header sticky top-0 bg-light border-b text-100 z-max">
     <nav aria-label="Realm navigation" class="max-w-screen-max mx-auto px-4 md:px-10 grid grid-cols-10 grid-flow-dense gap-4 md:gap-x-8 lg:gap-x-20 xxl:gap-x-32 items-center">
         <div class="main-navigation flex items-center gap-1 col-span-7 max-w-screen-max h-full py-2">
             <a href="/" class="rounded border border-gray-100 cursor-pointer h-10 w-10 shrink-0">
@@ -118,7 +118,7 @@
 {{ end }}
 
 {{ define "footer" }}
-<footer class="w-full text-100 py-1.5 border-t border-gray-300">
+<footer class="w-full text-100 py-1.5 border-t">
     <nav class="max-w-screen-max mx-auto px-4 md:px-10 mb-8 md:mb-0 grid grid-cols-1 md:grid-cols-4 justify-between items-start xl:items-center gap-2 xl:gap-20 pt-2 xl:pt-0">
         <!-- Footer Navigation -->
         <div class="col-span-1 pb-8 md:pb-0">

gno.land/pkg/gnoweb/frontend/js/realmhelp.ts

@@ -1,3 +1,5 @@
+import { debounce } from "./utils";
+
 class Help {
   private DOM: {
     el: HTMLElement | null;
@@ -40,18 +42,33 @@ class Help {
     this.DOM.addressInput = el.querySelector<HTMLInputElement>(Help.SELECTORS.addressInput);
     this.DOM.cmdModeSelect = el.querySelector<HTMLSelectElement>(Help.SELECTORS.cmdModeSelect);
 
-    console.log(this.DOM);
     this.funcList = this.DOM.funcs.map((funcEl) => new HelpFunc(funcEl));
 
+    this.restoreAddress();
     this.bindEvents();
   }
 
+  private restoreAddress(): void {
+    const { addressInput } = this.DOM;
+    if (addressInput) {
+      const storedAddress = localStorage.getItem("helpAddressInput");
+      if (storedAddress) {
+        addressInput.value = storedAddress;
+        this.funcList.forEach((func) => func.updateAddr(storedAddress));
+      }
+    }
+  }
+
   private bindEvents(): void {
     const { addressInput, cmdModeSelect } = this.DOM;
 
-    addressInput?.addEventListener("input", () => {
-      this.funcList.forEach((func) => func.updateAddr(addressInput.value));
+    const debouncedUpdate = debounce((addressInput: HTMLInputElement) => {
+      const address = addressInput.value;
+
+      localStorage.setItem("helpAddressInput", address);
+      this.funcList.forEach((func) => func.updateAddr(address));
     });
+    addressInput?.addEventListener("input", () => debouncedUpdate(addressInput));
 
     cmdModeSelect?.addEventListener("change", (e) => {
       const target = e.target as HTMLSelectElement;
@@ -66,6 +83,7 @@ class HelpFunc {
     addrs: HTMLElement[];
     args: HTMLElement[];
     modes: HTMLElement[];
+    paramInputs: HTMLInputElement[];
   };
 
   private funcName: string | null;
@@ -83,27 +101,52 @@ class HelpFunc {
       addrs: Array.from(el.querySelectorAll<HTMLElement>(HelpFunc.SELECTORS.address)),
       args: Array.from(el.querySelectorAll<HTMLElement>(HelpFunc.SELECTORS.args)),
       modes: Array.from(el.querySelectorAll<HTMLElement>(HelpFunc.SELECTORS.mode)),
+      paramInputs: Array.from(el.querySelectorAll<HTMLInputElement>(HelpFunc.SELECTORS.paramInput)),
     };
 
     this.funcName = el.dataset.func || null;
 
+    this.initializeArgs();
     this.bindEvents();
   }
 
+  private static sanitizeArgsInput(input: HTMLInputElement) {
+    const paramName = input.dataset.param || "";
+    const paramValue = input.value.trim();
+
+    if (!paramName) {
+      console.warn("sanitizeArgsInput: param is missing in arg input dataset.");
+    }
+
+    return { paramName, paramValue };
+  }
+
   private bindEvents(): void {
+    const debouncedUpdate = debounce((paramName: string, paramValue: string) => {
+      if (paramName) this.updateArg(paramName, paramValue);
+    });
+
     this.DOM.el.addEventListener("input", (e) => {
       const target = e.target as HTMLInputElement;
       if (target.dataset.role === "help-param-input") {
-        this.updateArg(target.dataset.param || "", target.value);
+        const { paramName, paramValue } = HelpFunc.sanitizeArgsInput(target);
+        debouncedUpdate(paramName, paramValue);
       }
     });
   }
 
+  private initializeArgs(): void {
+    this.DOM.paramInputs.forEach((input) => {
+      const { paramName, paramValue } = HelpFunc.sanitizeArgsInput(input);
+      if (paramName) this.updateArg(paramName, paramValue);
+    });
+  }
+
   public updateArg(paramName: string, paramValue: string): void {
     this.DOM.args
       .filter((arg) => arg.dataset.arg === paramName)
       .forEach((arg) => {
-        arg.textContent = paramValue.trim() || "";
+        arg.textContent = paramValue || "";
       });
   }
 
@@ -116,7 +159,8 @@ class HelpFunc {
   public updateMode(mode: string): void {
     this.DOM.modes.forEach((cmd) => {
       const isVisible = cmd.dataset.codeMode === mode;
-      cmd.className = isVisible ? "inline" : "hidden";
+      cmd.classList.toggle("inline", isVisible);
+      cmd.classList.toggle("hidden", !isVisible);
       cmd.dataset.copyContent = isVisible ? `help-cmd-${this.funcName}` : "";
     });
   }

gno.land/pkg/gnoweb/frontend/js/utils.ts

@@ -0,0 +1,12 @@
+export function debounce<T extends (...args: any[]) => void>(func: T, delay: number = 250): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  return function (this: any, ...args: Parameters<T>) {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+}

gno.land/pkg/gnoweb/public/js/realmhelp.js

@@ -0,0 +1 @@
+function r(t,n=250){let e;return function(...i){e!==void 0&&clearTimeout(e),e=setTimeout(()=>{t.apply(this,i)},n)}}export{r as debounce};