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 eccab815ae
commit ad6b00e722
19 changed files with 195 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>