Add compact style for monitor widget

docs/configuration.md

@@ -1149,11 +1149,19 @@ You can hover over the "ERROR" text to view more information.
 | Name | Type | Required | Default |
 | ---- | ---- | -------- | ------- |
 | sites | array | yes | |
+| style | string | no | |
 | show-failing-only | boolean | no | false |
 
 ##### `show-failing-only`
 Shows only a list of failing sites when set to `true`.
 
+##### `style`
+Used to change the appearance of the widget. Possible values are `compact`.
+
+Preview of `compact`:
+
+![](images/monitor-widget-compact-preview.png)
+
 ##### `sites`
 
 Properties for each site:

internal/assets/static/main.css

@@ -1830,6 +1830,7 @@ details[open] .summary::after {
 .list               { --list-half-gap: 0rem; }
 .list-gap-2         { --list-half-gap: 0.1rem; }
 .list-gap-4         { --list-half-gap: 0.2rem; }
+.list-gap-8         { --list-half-gap: 0.4rem; }
 .list-gap-10        { --list-half-gap: 0.5rem; }
 .list-gap-14        { --list-half-gap: 0.7rem; }
 .list-gap-20        { --list-half-gap: 1rem; }

internal/assets/templates.go

@@ -32,6 +32,7 @@ var (
 	RSSHorizontalCardsTemplate    = compileTemplate("rss-horizontal-cards.html", "widget-base.html")
 	RSSHorizontalCards2Template   = compileTemplate("rss-horizontal-cards-2.html", "widget-base.html")
 	MonitorTemplate               = compileTemplate("monitor.html", "widget-base.html")
+	MonitorCompactTemplate        = compileTemplate("monitor-compact.html", "widget-base.html")
 	TwitchGamesListTemplate       = compileTemplate("twitch-games-list.html", "widget-base.html")
 	TwitchChannelsTemplate        = compileTemplate("twitch-channels.html", "widget-base.html")
 	RepositoryTemplate            = compileTemplate("repository.html", "widget-base.html")

internal/assets/templates/monitor-compact.html

@@ -0,0 +1,39 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content" }}
+{{ if not (and .ShowFailingOnly (not .HasFailing)) }}
+<ul class="dynamic-columns list-gap-8">
+    {{ range .Sites }}
+    {{ if and $.ShowFailingOnly (eq .StatusStyle "ok" ) }}{{ continue }}{{ end }}
+    <div class="flex items-center gap-15">
+        {{ template "site" . }}
+    </div>
+    {{ end }}
+</ul>
+{{ else }}
+<div class="flex items-center justify-center gap-10 padding-block-5">
+    <p>All sites are online</p>
+    <svg class="shrink-0" style="width: 1.7rem;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+    </svg>
+</div>
+{{ end }}
+{{ end }}
+
+{{ define "site" }}
+<a class="size-h3 color-highlight text-truncate block grow" href="{{ .URL }}" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
+{{ if not .Status.TimedOut }}<div>{{ .Status.ResponseTime.Milliseconds | formatNumber }}ms</div>{{ end }}
+{{ if eq .StatusStyle "ok" }}
+<div class="monitor-site-status-icon" title="{{ .Status.Code }}">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+    </svg>
+</div>
+{{ else }}
+<div class="monitor-site-status-icon" title="{{ if .Status.Error }}{{ .Status.Error }}{{ else }}{{ .Status.Code }}{{ end }}">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-negative)">
+        <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 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
+    </svg>
+</div>
+{{ end }}
+{{ end }}

internal/widget/monitor.go

@@ -11,37 +11,6 @@ import (
 	"github.com/glanceapp/glance/internal/feed"
 )
 
-func statusCodeToText(status int, altStatusCodes []int) string {
-	if status == 200 || slices.Contains(altStatusCodes, status) {
-		return "OK"
-	}
-	if status == 404 {
-		return "Not Found"
-	}
-	if status == 403 {
-		return "Forbidden"
-	}
-	if status == 401 {
-		return "Unauthorized"
-	}
-	if status >= 400 {
-		return "Client Error"
-	}
-	if status >= 500 {
-		return "Server Error"
-	}
-
-	return strconv.Itoa(status)
-}
-
-func statusCodeToStyle(status int, altStatusCodes []int) string {
-	if status == 200 || slices.Contains(altStatusCodes, status) {
-		return "ok"
-	}
-
-	return "error"
-}
-
 type Monitor struct {
 	widgetBase `yaml:",inline"`
 	Sites      []struct {
@@ -54,8 +23,9 @@ type Monitor struct {
 		StatusStyle             string           `yaml:"-"`
 		AltStatusCodes          []int            `yaml:"alt-status-codes"`
 	} `yaml:"sites"`
-	ShowFailingOnly bool `yaml:"show-failing-only"`
-	HasFailing      bool `yaml:"-"`
+	Style           string `yaml:"style"`
+	ShowFailingOnly bool   `yaml:"show-failing-only"`
+	HasFailing      bool   `yaml:"-"`
 }
 
 func (widget *Monitor) Initialize() error {
@@ -96,5 +66,40 @@ func (widget *Monitor) Update(ctx context.Context) {
 }
 
 func (widget *Monitor) Render() template.HTML {
+	if widget.Style == "compact" {
+		return widget.render(widget, assets.MonitorCompactTemplate)
+	}
+
 	return widget.render(widget, assets.MonitorTemplate)
 }
+
+func statusCodeToText(status int, altStatusCodes []int) string {
+	if status == 200 || slices.Contains(altStatusCodes, status) {
+		return "OK"
+	}
+	if status == 404 {
+		return "Not Found"
+	}
+	if status == 403 {
+		return "Forbidden"
+	}
+	if status == 401 {
+		return "Unauthorized"
+	}
+	if status >= 400 {
+		return "Client Error"
+	}
+	if status >= 500 {
+		return "Server Error"
+	}
+
+	return strconv.Itoa(status)
+}
+
+func statusCodeToStyle(status int, altStatusCodes []int) string {
+	if status == 200 || slices.Contains(altStatusCodes, status) {
+		return "ok"
+	}
+
+	return "error"
+}