h/oslstats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

error modals are so on

Browse Source
This commit is contained in:
Haelnorr
2026-01-26 12:39:37 +11:00
parent a3dafa592b
commit a5b92a247b
19 changed files with 195 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
internal/view/component/popup/errorModal.templ
View File

@@ -1,126 +0,0 @@
package popup
// ErrorModal displays a full-screen modal for critical errors (500, 503)
templ ErrorModal() {
<div
x-show="errorModal.show"
x-cloak
class="fixed inset-0 z-50 flex items-center justify-center p-4"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
>
<!-- Backdrop (not clickable) -->
<div class="absolute inset-0 bg-crust/80"></div>
<!-- Modal Card -->
<div
class="relative bg-surface0 border-2 border-dark-red rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
x-transition:enter="transition ease-out duration-300 delay-100"
x-transition:enter-start="opacity-0 translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-4"
role="dialog"
aria-modal="true"
aria-labelledby="error-modal-title"
>
<!-- Header -->
<div class="flex items-start justify-between p-6 border-b border-dark-red">
<div class="flex items-center gap-3">
<!-- Warning Icon -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-8 text-red flex-shrink-0"
>
<path
fill-rule="evenodd"
d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"
></path>
</svg>
<!-- Title -->
<h2
id="error-modal-title"
class="text-2xl font-bold text-red"
x-text="`${errorModal.code} - ${errorModal.title}`"
></h2>
</div>
<!-- Close Button -->
<button
@click="closeErrorModal()"
class="text-subtext0 hover:text-text transition"
aria-label="Close modal"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>
</div>
<!-- Body -->
<div class="p-6">
<!-- User Message -->
<p class="text-lg text-subtext0" x-text="errorModal.message"></p>
<!-- Details Dropdown -->
<div class="mt-6">
<details class="bg-mantle rounded-lg p-4">
<summary class="cursor-pointer text-subtext1 font-semibold select-none hover:text-text transition">
Details
<span class="text-xs text-subtext0 ml-2">(click to expand)</span>
</summary>
<div class="mt-4 relative">
<pre
id="error-modal-details"
class="text-xs text-subtext0 font-mono whitespace-pre-wrap break-all bg-surface0 p-4 rounded overflow-x-auto max-h-96"
x-text="errorModal.details"
></pre>
</div>
<button
onclick="copyToClipboard('error-modal-details', this)"
class="mt-2 bg-mauve text-crust px-3 py-1 rounded text-xs hover:bg-mauve/75 transition"
title="Copy to clipboard"
>
Copy
</button>
</details>
</div>
</div>
</div>
</div>
<!-- Copy to Clipboard Script -->
<script>
function copyToClipboard(elementId, button) {
const element = document.getElementById(elementId);
const text = element.innerText;
navigator.clipboard.writeText(text)
.then(() => {
const originalText = button.innerText;
button.innerText = 'Copied!';
setTimeout(() => {
button.innerText = originalText;
}, 2000);
})
.catch(err => {
console.error('Failed to copy:', err);
button.innerText = 'Failed';
});
}
</script>
}

6
internal/view/component/popup/errorModalContainer.templ Normal file
View File

@@ -0,0 +1,6 @@
package popup
// ErrorModalContainer provides the target div for WebSocket error modal OOB swaps
templ ErrorModalContainer() {
<div id="error-modal-ws-container"></div>
}

65
internal/view/component/popup/errorModalWS.templ Normal file
View File

@@ -0,0 +1,65 @@
package popup
import "strconv"
import "fmt"
import "git.haelnorr.com/h/golib/notify"
// ErrorModalWS displays a WebSocket-triggered error modal
// Matches design of error page (page.ErrorWithDetails)
templ ErrorModalWS(code int, stacktrace string, nt notify.Notification, id int) {
<div
id="error-modal-ws-container"
hx-swap-oob="morph:#error-modal-ws-container"
>
<!-- Fullscreen backdrop overlay -->
<div class="fixed inset-0 z-50 bg-crust/80 flex items-center justify-center p-4">
<!-- Modal card -->
<div class="bg-base rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto p-8 text-center">
<!-- Error code -->
<h1 class="text-9xl text-text">{ strconv.Itoa(code) }</h1>
<!-- Error title -->
<p class="text-2xl font-bold tracking-tight text-subtext1 sm:text-4xl">
{ nt.Title }
</p>
<!-- User message -->
<p class="mt-4 text-subtext0">{ nt.Message }</p>
<!-- Details dropdown -->
if stacktrace != "" {
<div class="mt-8 text-left">
<details class="bg-surface0 rounded-lg p-4 text-right">
<summary class="text-left cursor-pointer text-subtext1 font-semibold select-none hover:text-text">
Details
<span class="text-xs text-subtext0 ml-2">(click to expand)</span>
</summary>
<div class="text-left mt-4 relative">
<pre
id={ fmt.Sprintf("error-modal-ws-details-%d", id) }
class="text-xs text-subtext0 font-mono whitespace-pre-wrap break-all bg-mantle p-4 rounded overflow-x-auto max-h-96"
>{ stacktrace }</pre>
</div>
<button
onclick={ templ.JSFuncCall("copyToClipboard", fmt.Sprintf("error-modal-ws-details-%v", id), "copyButton") }
id="copyButton"
class="mt-2 bg-mauve text-crust px-3 py-1 rounded text-xs hover:bg-mauve/75 transition"
title="Copy to clipboard"
>
Copy
</button>
</details>
</div>
}
<!-- Close button -->
<div class="mt-6">
<button
onclick="document.getElementById('error-modal-ws-container').innerHTML = ''"
class="inline-block rounded-lg bg-mauve px-5 py-3 text-sm text-crust transition hover:bg-mauve/75"
>
Close Modal
</button>
</div>
</div>
</div>
<script src="/static/js/copytoclipboard.js"></script>
</div>
}

63
internal/view/component/popup/errorPopup.templ
View File

@@ -1,63 +0,0 @@
package popup
templ ErrorPopup() {
<div
x-cloak
x-show="showError500"
class="absolute w-82 left-0 right-0 mt-20 mr-5 ml-auto"
x-transition:enter="transform translate-x-[100%] opacity-0 duration-200"
x-transition:enter-start="opacity-0 translate-x-[100%]"
x-transition:enter-end="opacity-100 translate-x-0"
x-transition:leave="opacity-0 duration-200"
x-transition:leave-start="opacity-100 translate-x-0"
x-transition:leave-end="opacity-0 translate-x-[100%]"
>
<div
role="alert"
class="rounded-sm bg-dark-red p-4"
>
<div class="flex justify-between">
<div class="flex items-center gap-2 text-red w-fit">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-5"
>
<path
fill-rule="evenodd"
d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355
12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309
0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75
0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0
01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"
></path>
</svg>
<strong class="block font-medium">Something went wrong </strong>
</div>
<div class="flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6 text-subtext0 hover:cursor-pointer"
@click="showError500=false"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</div>
</div>
<p class="mt-2 text-sm text-red">
An error occured on the server. Please try again later,
or contact an administrator
</p>
</div>
</div>
}

42
internal/view/component/popup/toast.templ
View File

@@ -8,16 +8,22 @@ import "git.haelnorr.com/h/golib/hws"
// Backend should pass: notifType ("success"|"warning"|"info"), title, message
templ Toast(nt notify.Notification, id, duration int) {
{{
// Determine classes server-side based on notifType
color := map[notify.Level]string{
notify.LevelSuccess: "green",
notify.LevelWarn: "yellow",
notify.LevelInfo: "blue",
hws.LevelShutdown: "yellow",
type style struct {
bg string
fg string
border string
bgdark string
}
// Determine classes server-side based on notifType
var colors style
switch nt.Level {
case notify.LevelSuccess:
colors = style{bg: "bg-green", fg: "text-green", border: "border-green", bgdark: "bg-dark-green"}
case notify.LevelWarn, hws.LevelShutdown:
colors = style{bg: "bg-yellow", fg: "text-yellow", border: "border-yellow", bgdark: "bg-dark-yellow"}
case notify.LevelInfo:
colors = style{bg: "bg-blue", fg: "text-blue", border: "border-blue", bgdark: "bg-dark-blue"}
}
containerClass := fmt.Sprintf("bg-dark-%s border-2 border-%s", color[nt.Level], color[nt.Level])
textClass := fmt.Sprintf("text-%s", color[nt.Level])
progressClass := fmt.Sprintf("bg-%s", color[nt.Level])
}}
<div
id="toast-ws-container"
@@ -25,23 +31,23 @@ templ Toast(nt notify.Notification, id, duration int) {
>
<div
id={ fmt.Sprintf("ws-toast-%d", id) }
class={ fmt.Sprintf("pointer-events-auto rounded-lg shadow-lg overflow-hidden w-full mb-2 %s", containerClass) }
class={ fmt.Sprintf("pointer-events-auto rounded-lg shadow-lg overflow-hidden w-full mb-2 border-2 %s %s", colors.bgdark, colors.border) }
role="alert"
x-data={ templ.JSFuncCall("progressBar", fmt.Sprintf("ws-toast-%d", id), duration).CallInline }
@mouseenter="paused = true"
@mouseleave="paused = false"
>
<!-- @mouseleave="paused = false" -->
<!-- Toast Content -->
<div class="p-4 max-w-80">
<div class="flex justify-between items-start gap-3">
<!-- Icon + Content -->
<div class="flex items-start gap-3 flex-1">
<!-- Icon (rendered server-side based on notifType) -->
<!-- Icon -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class={ fmt.Sprintf("size-5 shrink-0 %s", textClass) }
class={ fmt.Sprintf("size-5 shrink-0 %s", colors.fg) }
>
switch nt.Level {
case notify.LevelSuccess:
@@ -64,9 +70,9 @@ templ Toast(nt notify.Notification, id, duration int) {
></path>
}
</svg>
<!-- Text Content (rendered server-side) -->
<!-- Text Content -->
<div class="flex-1 min-w-0 max-w-48 text-wrap">
<p class={ fmt.Sprintf("font-semibold %s", textClass) }>
<p class={ fmt.Sprintf("font-semibold %s", colors.fg) }>
{ nt.Title }
</p>
<p class="text-sm text-subtext0 mt-1 text-wrap">
@@ -97,11 +103,11 @@ templ Toast(nt notify.Notification, id, duration int) {
</button>
</div>
</div>
<!-- Progress Bar (vanilla JS manages width) -->
<div class="h-1 bg-surface0">
<!-- Progress Bar -->
<div class="h-1">
<div
id={ fmt.Sprintf("ws-toast-%d-progress", id) }
class={ fmt.Sprintf("h-full %s", progressClass) }
class={ fmt.Sprintf("h-full %s", colors.bg) }
style="width: 0"
></div>
</div>

1
internal/view/component/popup/toastContainer.templ
View File

@@ -3,6 +3,7 @@ package popup
// ToastContainer displays stacked toast notifications (success, warning, info)
// Supports both regular toasts (AlpineJS) and WebSocket toasts (HTMX OOB swaps)
templ ToastContainer() {
<script src="/static/js/toasts.js" defer></script>
<div class="fixed top-20 right-5 z-40 flex flex-col gap-3 max-w-sm pointer-events-none">
<div id="toast-ws-container"></div>
</div>

3
internal/view/layout/global.templ
View File

@@ -26,7 +26,6 @@ templ Global(title string) {
<link href="/static/css/output.css" rel="stylesheet"/>
<script src="/static/vendored/htmx@2.0.8.min.js"></script>
<script src="/static/vendored/htmx-ext-ws.min.js"></script>
<script src="/static/js/toasts.js" defer></script>
<script src="/static/vendored/alpinejs@3.15.4.min.js" defer></script>
if devInfo.HTMXLog {
<script>
@@ -39,7 +38,7 @@ templ Global(title string) {
hx-ext="ws"
ws-connect={ devInfo.WebsocketBase + "/ws/notifications" }
>
<!-- @popup.ErrorModal() -->
@popup.ErrorModalContainer()
@popup.ToastContainer()
<div
id="main-content"

21
internal/view/page/error.templ
View File

@@ -29,7 +29,7 @@ templ ErrorWithDetails(code int, err string, message string, details string) {
<pre id="details" class="text-xs text-subtext0 font-mono whitespace-pre-wrap break-all bg-mantle p-4 rounded overflow-x-auto">{ details }</pre>
</div>
<button
onclick="copyToClipboard('details')"
onclick="copyToClipboard('details', 'copyButton')"
id="copyButton"
class="mt-2 bg-mauve text-crust px-3 py-1 rounded text-xs hover:bg-mauve/75 transition hover:cursor-pointer"
title="Copy to clipboard"
@@ -45,24 +45,7 @@ templ ErrorWithDetails(code int, err string, message string, details string) {
</div>
</div>
if details != "" {
<script>
function copyToClipboard(id) {
var details = document.getElementById(id).innerText;
var button = document.getElementById("copyButton");
navigator.clipboard
.writeText(details)
.then(function () {
button.innerText = "Copied!";
setTimeout(function () {
button.innerText = "Copy";
}, 2000);
})
.catch(function (err) {
console.error("Failed to copy:", err);
button.innerText = "Failed";
});
}
</script>
<script src="/static/js/copytoclipboard.js"></script>
}
}
}

7
internal/view/page/test.templ
View File

@@ -13,7 +13,7 @@ templ Test() {
</h1>
<!-- Form Card -->
<div class="bg-surface0 rounded-lg shadow-lg p-6 border border-overlay0">
<form hx-post="/test" hx-swap="none" class="flex flex-col gap-4">
<form hx-post="/notification-tester" hx-swap="none" class="flex flex-col gap-4">
<!-- Notification Type -->
<div class="flex flex-col gap-2">
<label for="type" class="text-sm font-semibold text-subtext1">
@@ -27,15 +27,16 @@ templ Test() {
<option value="success">Success Toast</option>
<option value="info">Info Toast</option>
<option value="warn">Warning Toast</option>
<!-- <option value="error">Error Modal</option> -->
<option value="error">Error Modal</option>
</select>
</div>
<!-- Target Input -->
<div class="flex flex-col gap-2">
<label for="target" class="text-sm font-semibold text-subtext1">
Title
Target
</label>
<input
required
type="text"
name="target"
id="target"