moved packages out of pkg

internal/embedfs/embedfs.go

@@ -0,0 +1,21 @@
+// Package embedfs creates an embedded filesystem with the static web assets
+package embedfs
+
+import (
+	"embed"
+	"io/fs"
+
+	"github.com/pkg/errors"
+)
+
+//go:embed web/*
+var embeddedFiles embed.FS
+
+// GetEmbeddedFS gets the embedded files
+func GetEmbeddedFS() (fs.FS, error) {
+	subFS, err := fs.Sub(embeddedFiles, "web")
+	if err != nil {
+		return nil, errors.Wrap(err, "fs.Sub")
+	}
+	return subFS, nil
+}

internal/embedfs/web/css/input.css

@@ -0,0 +1,129 @@
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+@import "tailwindcss";
+
+[x-cloak] {
+  display: none !important;
+}
+
+@theme inline {
+  --color-rosewater: var(--rosewater);
+  --color-flamingo: var(--flamingo);
+  --color-pink: var(--pink);
+  --color-mauve: var(--mauve);
+  --color-red: var(--red);
+  --color-dark-red: var(--dark-red);
+  --color-maroon: var(--maroon);
+  --color-peach: var(--peach);
+  --color-yellow: var(--yellow);
+  --color-dark-yellow: var(--dark-yellow);
+  --color-green: var(--green);
+  --color-dark-green: var(--dark-green);
+  --color-teal: var(--teal);
+  --color-sky: var(--sky);
+  --color-sapphire: var(--sapphire);
+  --color-blue: var(--blue);
+  --color-dark-blue: var(--dark-blue);
+  --color-lavender: var(--lavender);
+  --color-text: var(--text);
+  --color-subtext1: var(--subtext1);
+  --color-subtext0: var(--subtext0);
+  --color-overlay2: var(--overlay2);
+  --color-overlay1: var(--overlay1);
+  --color-overlay0: var(--overlay0);
+  --color-surface2: var(--surface2);
+  --color-surface1: var(--surface1);
+  --color-surface0: var(--surface0);
+  --color-base: var(--base);
+  --color-mantle: var(--mantle);
+  --color-crust: var(--crust);
+}
+
+:root {
+  --rosewater: hsl(11, 59%, 67%);
+  --flamingo: hsl(0, 60%, 67%);
+  --pink: hsl(316, 73%, 69%);
+  --mauve: hsl(266, 85%, 58%);
+  --red: hsl(347, 87%, 44%);
+  --dark-red: hsl(343, 50%, 82%);
+  --maroon: hsl(355, 76%, 59%);
+  --peach: hsl(22, 99%, 52%);
+  --yellow: hsl(35, 77%, 49%);
+  --dark-yellow: hsl(35, 50%, 85%);
+  --green: hsl(109, 58%, 40%);
+  --dark-green: hsl(109, 35%, 85%);
+  --teal: hsl(183, 74%, 35%);
+  --sky: hsl(197, 97%, 46%);
+  --sapphire: hsl(189, 70%, 42%);
+  --blue: hsl(220, 91%, 54%);
+  --dark-blue: hsl(220, 50%, 85%);
+  --lavender: hsl(231, 97%, 72%);
+  --text: hsl(234, 16%, 35%);
+  --subtext1: hsl(233, 13%, 41%);
+  --subtext0: hsl(233, 10%, 47%);
+  --overlay2: hsl(232, 10%, 53%);
+  --overlay1: hsl(231, 10%, 59%);
+  --overlay0: hsl(228, 11%, 65%);
+  --surface2: hsl(227, 12%, 71%);
+  --surface1: hsl(225, 14%, 77%);
+  --surface0: hsl(223, 16%, 83%);
+  --base: hsl(220, 23%, 95%);
+  --mantle: hsl(220, 22%, 92%);
+  --crust: hsl(220, 21%, 89%);
+}
+
+.dark {
+  --rosewater: hsl(10, 56%, 91%);
+  --flamingo: hsl(0, 59%, 88%);
+  --pink: hsl(316, 72%, 86%);
+  --mauve: hsl(267, 84%, 81%);
+  --red: hsl(343, 81%, 75%);
+  --dark-red: hsl(316, 19%, 27%);
+  --maroon: hsl(350, 65%, 77%);
+  --peach: hsl(23, 92%, 75%);
+  --yellow: hsl(41, 86%, 83%);
+  --dark-yellow: hsl(41, 30%, 25%);
+  --green: hsl(115, 54%, 76%);
+  --dark-green: hsl(115, 25%, 22%);
+  --teal: hsl(170, 57%, 73%);
+  --sky: hsl(189, 71%, 73%);
+  --sapphire: hsl(199, 76%, 69%);
+  --blue: hsl(217, 92%, 76%);
+  --dark-blue: hsl(217, 30%, 25%);
+  --lavender: hsl(232, 97%, 85%);
+  --text: hsl(226, 64%, 88%);
+  --subtext1: hsl(227, 35%, 80%);
+  --subtext0: hsl(228, 24%, 72%);
+  --overlay2: hsl(228, 17%, 64%);
+  --overlay1: hsl(230, 13%, 55%);
+  --overlay0: hsl(231, 11%, 47%);
+  --surface2: hsl(233, 12%, 39%);
+  --surface1: hsl(234, 13%, 31%);
+  --surface0: hsl(237, 16%, 23%);
+  --base: hsl(240, 21%, 15%);
+  --mantle: hsl(240, 21%, 12%);
+  --crust: hsl(240, 23%, 9%);
+}
+
+.ubuntu-mono-regular {
+  font-family: "Ubuntu Mono", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.ubuntu-mono-bold {
+  font-family: "Ubuntu Mono", serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.ubuntu-mono-regular-italic {
+  font-family: "Ubuntu Mono", serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.ubuntu-mono-bold-italic {
+  font-family: "Ubuntu Mono", serif;
+  font-weight: 700;
+  font-style: italic;
+}

internal/embedfs/web/js/copytoclipboard.js

@@ -0,0 +1,17 @@
+function copyToClipboard(elementId, buttonId) {
+  const element = document.getElementById(elementId);
+  const button = document.getElementById(buttonId);
+
+  navigator.clipboard.writeText(element.innerText)
+    .then(() => {
+      const originalText = button.innerText;
+      button.innerText = 'Copied!';
+      setTimeout(() => {
+        button.innerText = originalText;
+      }, 2000);
+    })
+    .catch(err => {
+      console.error('Failed to copy:', err);
+      button.innerText = 'Failed';
+    });
+}

internal/embedfs/web/js/pagination.js

@@ -0,0 +1,45 @@
+function paginateData(
+  formID,
+  rootPath,
+  initPage,
+  initPerPage,
+  initOrder,
+  initOrderBy,
+) {
+  return {
+    page: initPage,
+    perPage: initPerPage,
+    order: initOrder || "ASC",
+    orderBy: initOrderBy || "name",
+
+    goToPage(n) {
+      this.page = n;
+      this.submit();
+    },
+
+    handleSortChange(value) {
+      const [field, direction] = value.split("|");
+      this.orderBy = field;
+      this.order = direction;
+      this.page = 1; // Reset to first page when sorting
+      this.submit();
+    },
+
+    setPerPage(n) {
+      this.perPage = n;
+      this.page = 1; // Reset to first page when changing per page
+      this.submit();
+    },
+
+    submit() {
+      var url = `${rootPath}?page=${this.page}&per_page=${this.perPage}&order=${this.order}&order_by=${this.orderBy}`;
+      htmx.find("#pagination-page").value = this.page;
+      htmx.find("#pagination-per-page").value = this.perPage;
+      htmx.find("#sort-order").value = this.order;
+      htmx.find("#sort-order-by").value = this.orderBy;
+      htmx.find(`#${formID}`).setAttribute("hx-post", url);
+      htmx.process(`#${formID}`);
+      htmx.trigger(`#${formID}`, "submit");
+    },
+  };
+}

internal/embedfs/web/js/theme.js

@@ -0,0 +1,15 @@
+// This function prevents the 'flash of unstyled content'
+// Include it at the top of <head>
+(function() {
+  let theme = localStorage.getItem("theme") || "system";
+  if (theme === "system") {
+    theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+  if (theme === "dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+})();

internal/embedfs/web/js/toasts.js

@@ -0,0 +1,54 @@
+function progressBar(toastId, duration) {
+  const progressBar = {
+    progress: 0,
+    paused: false,
+
+    animateToastProgress() {
+      const toast = document.getElementById(toastId);
+      if (!toast) return;
+      const bar = document.getElementById([toastId, "progress"].join("-"));
+
+      const startTime = performance.now();
+      let totalPausedTime = 0;
+      let pauseStartTime = null;
+
+      const animate = (currentTime) => {
+        const toast = document.getElementById(toastId);
+        if (!toast) return; // Toast was manually removed
+
+        if (this.paused) {
+          // Track when pause started
+          if (pauseStartTime === null) {
+            pauseStartTime = currentTime;
+          }
+          // Keep animating while paused
+          requestAnimationFrame(animate);
+          return;
+        } else {
+          // If we were paused, accumulate the paused time
+          if (pauseStartTime !== null) {
+            totalPausedTime += currentTime - pauseStartTime;
+            pauseStartTime = null;
+          }
+        }
+
+        // Calculate actual elapsed time (excluding paused time)
+        const elapsed = currentTime - startTime - totalPausedTime;
+        this.progress = Math.min((elapsed / duration) * 100, 100) + "%";
+        bar.style["width"] = this.progress;
+
+
+        if (elapsed >= duration) {
+          toast.remove()
+        } else {
+          requestAnimationFrame(animate);
+        }
+      };
+
+      requestAnimationFrame(animate);
+    }
+  };
+  progressBar.animateToastProgress();
+  return progressBar;
+}
+