Make dynamic columns collapsable

internal/assets/static/main.js

@@ -365,8 +365,8 @@ function attachExpandToggleButton(collapsibleContainer) {
 };
 
 
-function setupCollapsibleLists() {
-    const collapsibleLists = document.querySelectorAll(".list.collapsible-container");
+function setupCollapsibleLists(selector) {
+    const collapsibleLists = document.querySelectorAll(selector);
 
     if (collapsibleLists.length == 0) {
         return;
@@ -596,7 +596,8 @@ async function setupPage() {
         setupClocks()
         setupCarousels();
         setupSearchBoxes();
-        setupCollapsibleLists();
+        setupCollapsibleLists(".list.collapsible-container");
+        setupCollapsibleLists(".dynamic-columns.collapsible-container");
         setupCollapsibleGrids();
         setupGroups();
         setupDynamicRelativeTime();

internal/assets/templates/change-detection.html

@@ -12,7 +12,7 @@
     {{ end }}
 </ul>
 {{ else }}
-<ul class="dynamic-columns">
+<ul class="dynamic-columns collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
   {{ range .ChangeDetections }}
   <li class="flex flex-column gap-5">
     {{ template "change-detection" . }}

internal/assets/templates/monitor.html

@@ -2,7 +2,7 @@
 
 {{ define "widget-content" }}
 {{ if ne .Style "dynamic-columns-experimental" }}
-<ul class="list list-gap-20 list-with-separator">
+<ul class="list list-gap-20 list-with-separator" data-collapse-after="{{ .CollapseAfter }}">
     {{ range .Sites }}
     <li class="monitor-site flex items-center gap-15">
         {{ template "site" . }}
@@ -10,7 +10,7 @@
     {{ end }}
 </ul>
 {{ else }}
-<ul class="dynamic-columns">
+<ul class="dynamic-columns collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
     {{ range .Sites }}
     <div class="flex items-center gap-15">
         {{ template "site" . }}

internal/assets/templates/twitch-channels.html

@@ -10,7 +10,7 @@
   {{ end }}
 </ul>
 {{ else }}
-<ul class="dynamic-columns">
+<ul class="dynamic-columns collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
     {{ range .Channels }}
     <li class="flex flex-column gap-5">
         {{ template "twitch-channel" . }}

internal/assets/templates/twitch-games-list.html

@@ -10,7 +10,7 @@
   {{ end }}
 </ul>
 {{ else }}
-<ul class="dynamic-columns">
+<ul class="dynamic-columns collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
     {{ range .Categories }}
     <li class="flex flex-column gap-5">
         {{ template "twitch-category" . }}

internal/widget/monitor.go

@@ -53,12 +53,17 @@ type Monitor struct {
 		StatusText              string           `yaml:"-"`
 		StatusStyle             string           `yaml:"-"`
 	} `yaml:"sites"`
-	Style string `yaml:"style"`
+	Style         string `yaml:"style"`
+	CollapseAfter int    `yaml:"collapse-after"`
 }
 
 func (widget *Monitor) Initialize() error {
 	widget.withTitle("Monitor").withCacheDuration(5 * time.Minute)
 
+	if widget.CollapseAfter == 0 || widget.CollapseAfter < -1 {
+		widget.CollapseAfter = 5
+	}
+
 	for i := range widget.Sites {
 		widget.Sites[i].IconUrl, widget.Sites[i].IsSimpleIcon = toSimpleIconIfPrefixed(widget.Sites[i].IconUrl)
 	}