From e555cc62b13e295c103e773111f1b5d851f7836f Mon Sep 17 00:00:00 2001
From: eleith <online-gitea@eleith.com>
Date: Wed, 27 Aug 2025 00:20:34 +0000
Subject: [PATCH 1/4] feat(template): improve digest page header and layout

Refactors the digest page header to be more compact and readable.

- Consolidates metadata into a single subtitle line below the main title.
- Ensures header content is left-aligned and spacing is tight.
- Adjusts styles for better dark mode contrast and link visibility.
- Hides the summary section completely when no summary is present.
---
 internal/templates/grouped-entries.gohtml | 57 ++++++++++++++++++-----
 1 file changed, 46 insertions(+), 11 deletions(-)

diff --git a/internal/templates/grouped-entries.gohtml b/internal/templates/grouped-entries.gohtml
index 0822209..2e8858e 100644
--- a/internal/templates/grouped-entries.gohtml
+++ b/internal/templates/grouped-entries.gohtml
@@ -8,6 +8,43 @@
 	<style>
 		{{include "static/style.css"}}
 
+		section.header {
+			text-align: left;
+			margin-bottom: 2rem;
+		}
+
+		.subtitle {
+			font-size: 0.9rem;
+			color: var(--header-date-color);
+			margin-top: 0;
+		}
+
+		.subtitle a {
+			color: var(--entry-link-color);
+			text-decoration: none;
+		}
+
+		.subtitle a:hover {
+			text-decoration: underline;
+		}
+
+		h1.title {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+
+		.container {
+			min-width: 360px;
+		}
+
+		.group-entries-title, .sub-group-title {
+			font-size: 1.25rem;
+			font-weight: 500;
+			color: var(--text-color);
+			margin-top: 0.5rem;
+			margin-bottom: 0.5rem;
+		}
+
 		{{range .FeedIcons}} div.feed-icon-{{.FeedID}} {
 			background-image: url("data:{{.Data}}");
 			background-size: contain;
@@ -22,20 +59,18 @@
 	<div class="container">
 		<section class="header">
 			<h1 class="title">{{.PrimaryGroup.Title}}</h1>
-			<span class="date">generated on {{.GeneratedDate.Format
-				"Jan 2, 2006"}}</span>
-		</section>
-
-		<section class="summary">
-			<h2 class="group-entries-title">Summary</h2>
-      {{if .PrimaryGroup.Summary}}
-			<p>{{textToHTML .PrimaryGroup.Summary}}</p>
-			{{end}}
-			<p>
-				This digest has {{.PrimaryGroup.TotalEntries}} entries from {{.PrimaryGroup.TotalFeeds}} feeds.
+			<p class="subtitle">
+				generated <a href=".." title="Back to Overview">{{.GeneratedDate.Format "Jan 2, 2006"}}</a>, with {{.PrimaryGroup.TotalEntries}} entries from {{.PrimaryGroup.TotalFeeds}} feeds.
 			</p>
 		</section>
 
+		{{if .PrimaryGroup.Summary}}
+		<section class="summary">
+			<h2 class="group-entries-title">Summary</h2>
+			<p>{{textToHTML .PrimaryGroup.Summary}}</p>
+		</section>
+		{{end}}
+
 		<section class="entries">
     {{range .PrimaryGroup.SubGroups}}
     <h3 class="sub-group-title">{{.Title}}</h3>
-- 
2.54.0


From 9c7c97906fe99cec8e814d5e0a10ba5b6de46e27 Mon Sep 17 00:00:00 2001
From: eleith <online-gitea@eleith.com>
Date: Wed, 27 Aug 2025 00:35:24 +0000
Subject: [PATCH 2/4] feat(overview): improve page layout and mock data

- Always display entry/feed counts for each group on the overview page.
- Standardize heading styles on the overview page.
- Use div for summary blocks instead of p.
- Update the preview script to inject mock summaries for better testing.
---
 internal/templates/grouped-entries.gohtml |  2 +-
 internal/templates/overview.gohtml        | 11 +++++------
 internal/templates/static/style.css       |  5 ++---
 scripts/preview/main.go                   | 11 ++++++++++-
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/internal/templates/grouped-entries.gohtml b/internal/templates/grouped-entries.gohtml
index 2e8858e..fb3032e 100644
--- a/internal/templates/grouped-entries.gohtml
+++ b/internal/templates/grouped-entries.gohtml
@@ -67,7 +67,7 @@
 		{{if .PrimaryGroup.Summary}}
 		<section class="summary">
 			<h2 class="group-entries-title">Summary</h2>
-			<p>{{textToHTML .PrimaryGroup.Summary}}</p>
+			<div>{{textToHTML .PrimaryGroup.Summary}}</div>
 		</section>
 		{{end}}
 
diff --git a/internal/templates/overview.gohtml b/internal/templates/overview.gohtml
index 770cce3..977fdb5 100644
--- a/internal/templates/overview.gohtml
+++ b/internal/templates/overview.gohtml
@@ -14,24 +14,23 @@
         </section>
 
         <section class="summary">
-            <h2>Summary</h2>
+            <h2 class="group-entries-title">Summary</h2>
             {{if .OverviewSummary}}
-            <p>{{.OverviewSummary}}</p>
+            <div>{{.OverviewSummary}}</div>
             {{end}}
             <p>You have {{.TotalEntries}} entries from {{.TotalFeeds}} feeds.</p>
         </section>
 
         <section class="grouped-digests">
-            <h2>Grouped Digests</h2>
+            <h2 class="group-entries-title">Grouped Digests</h2>
             <ul>
                 {{range .PrimaryGroups}}
                     <li>
                         <h3><a href="digests/{{.Slug}}.html">{{.Title}}</a></h3>
                         {{if .Summary}}
-                        <p>{{.Summary}}</p>
-                        {{else}}
+                        <div>{{.Summary}}</div>
+                        {{end}}
                         <p>{{.TotalEntries}} entries from {{.TotalFeeds}} feeds.</p>
-												{{end}}
                     </li>
                 {{end}}
             </ul>
diff --git a/internal/templates/static/style.css b/internal/templates/static/style.css
index b0d31e8..4b9b3c1 100644
--- a/internal/templates/static/style.css
+++ b/internal/templates/static/style.css
@@ -89,7 +89,7 @@ section.header .date {
     color: var(--header-date-color);
 }
 
-section.summary p:first-of-type {
+section.summary div:first-of-type {
     margin: 1rem auto;
     padding: 0.5rem 1rem;
     background-color: var(--container-background);
@@ -100,10 +100,9 @@ section.summary p:first-of-type {
 h2.group-entries-title {
     font-size: 1.25rem;
     font-weight: 500;
-    color: var(--group-title-color);
+    color: var(--text-color);
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
-    padding-left: 0.5rem;
 }
 
 section.entry {
diff --git a/scripts/preview/main.go b/scripts/preview/main.go
index a1b83a5..fec007c 100644
--- a/scripts/preview/main.go
+++ b/scripts/preview/main.go
@@ -79,7 +79,7 @@ func generateMockDigest(cfg *config.Config) *models.OverviewTemplateData {
 	}
 
 	log.Println("generateDigestData: Building digest data...")
-	return digestSvc.BuildDigestData(
+	data := digestSvc.BuildDigestData(
 		entries,
 		icons,
 		cfg.Digest.GroupBy,
@@ -87,6 +87,15 @@ func generateMockDigest(cfg *config.Config) *models.OverviewTemplateData {
 		cfg.Digest.SortBy,
 		cfg.Miniflux.Host,
 	)
+
+	if len(data.PrimaryGroups) > 0 {
+		data.PrimaryGroups[0].Summary = "This is a mock summary for the first group to test the layout."
+	}
+	if len(data.PrimaryGroups) > 2 {
+		data.PrimaryGroups[2].Summary = "This is another mock summary for a different group, showing that not all groups have summaries."
+	}
+
+	return data
 }
 
 func generateMinifluxDigest(cfg *config.Config, minifluxClientService services.MinifluxClientService) *models.OverviewTemplateData {
-- 
2.54.0


From c0145793bcd168b933407da18babd2d87deb2b27 Mon Sep 17 00:00:00 2001
From: eleith <online-gitea@eleith.com>
Date: Wed, 27 Aug 2025 13:05:25 +0000
Subject: [PATCH 3/4] feat(ui): redesign overview page and align digest header

- Replaces the list-based layout on the overview page with a card-based design consistent with the digest pages.
- Moves header and subtitle styles to the main stylesheet for global use.
- Aligns the digest page header to match the new overview header style for a consistent look and feel.
- Enhances the mock data script to produce an overview summary for better previews.
---
 internal/templates/grouped-entries.gohtml | 37 -----------------------
 internal/templates/overview.gohtml        | 37 +++++++++++++----------
 internal/templates/static/style.css       | 20 ++++++++++--
 scripts/preview/main.go                   |  2 ++
 4 files changed, 41 insertions(+), 55 deletions(-)

diff --git a/internal/templates/grouped-entries.gohtml b/internal/templates/grouped-entries.gohtml
index fb3032e..58b5709 100644
--- a/internal/templates/grouped-entries.gohtml
+++ b/internal/templates/grouped-entries.gohtml
@@ -8,43 +8,6 @@
 	<style>
 		{{include "static/style.css"}}
 
-		section.header {
-			text-align: left;
-			margin-bottom: 2rem;
-		}
-
-		.subtitle {
-			font-size: 0.9rem;
-			color: var(--header-date-color);
-			margin-top: 0;
-		}
-
-		.subtitle a {
-			color: var(--entry-link-color);
-			text-decoration: none;
-		}
-
-		.subtitle a:hover {
-			text-decoration: underline;
-		}
-
-		h1.title {
-			margin-top: 0;
-			margin-bottom: 0;
-		}
-
-		.container {
-			min-width: 360px;
-		}
-
-		.group-entries-title, .sub-group-title {
-			font-size: 1.25rem;
-			font-weight: 500;
-			color: var(--text-color);
-			margin-top: 0.5rem;
-			margin-bottom: 0.5rem;
-		}
-
 		{{range .FeedIcons}} div.feed-icon-{{.FeedID}} {
 			background-image: url("data:{{.Data}}");
 			background-size: contain;
diff --git a/internal/templates/overview.gohtml b/internal/templates/overview.gohtml
index 977fdb5..20ec1b4 100644
--- a/internal/templates/overview.gohtml
+++ b/internal/templates/overview.gohtml
@@ -9,31 +9,36 @@
 <body>
     <div class="container">
         <section class="header">
-            <h1>Miniflux Digest Overview</h1>
-            <span class="date">generated on {{.GeneratedDate.Format "Jan 2, 2006"}}</span>
+            <h1 class="title">Miniflux Digest Overview</h1>
+            <p class="subtitle">
+                Generated on {{.GeneratedDate.Format "Jan 2, 2006"}}, with {{.TotalEntries}} entries from {{.TotalFeeds}} feeds.
+            </p>
         </section>
 
+        {{if .OverviewSummary}}
         <section class="summary">
             <h2 class="group-entries-title">Summary</h2>
-            {{if .OverviewSummary}}
             <div>{{.OverviewSummary}}</div>
-            {{end}}
-            <p>You have {{.TotalEntries}} entries from {{.TotalFeeds}} feeds.</p>
         </section>
+        {{end}}
 
         <section class="grouped-digests">
             <h2 class="group-entries-title">Grouped Digests</h2>
-            <ul>
-                {{range .PrimaryGroups}}
-                    <li>
-                        <h3><a href="digests/{{.Slug}}.html">{{.Title}}</a></h3>
-                        {{if .Summary}}
-                        <div>{{.Summary}}</div>
-                        {{end}}
-                        <p>{{.TotalEntries}} entries from {{.TotalFeeds}} feeds.</p>
-                    </li>
-                {{end}}
-            </ul>
+            {{range .PrimaryGroups}}
+                <section class="entry">
+                    <summary class="entry">
+                        <a href="digests/{{.Slug}}.html" class="entry-link">{{.Title}}</a>
+                    </summary>
+                    {{if .Summary}}
+                    <div class="entry-content">
+                        {{.Summary}}
+                    </div>
+                    {{end}}
+                    <div class="entry-meta">
+                        <div class="entry-meta-tab">{{.TotalEntries}} entries from {{.TotalFeeds}} feeds.</div>
+                    </div>
+                </section>
+            {{end}}
         </section>
     </div>
 </body>
diff --git a/internal/templates/static/style.css b/internal/templates/static/style.css
index 4b9b3c1..98b5b45 100644
--- a/internal/templates/static/style.css
+++ b/internal/templates/static/style.css
@@ -68,20 +68,36 @@ body {
 
 .container {
     max-width: 800px;
+    min-width: 360px;
     margin: 2rem auto;
     padding: 1.5rem;
 }
 
 section.header {
     margin-bottom: 1.5rem;
-    text-align: center;
+    text-align: left;
 }
 
 section.header h1.title {
     font-size: 1.875rem;
     font-weight: 700;
     color: var(--header-title-color);
-    margin-bottom: 0.25rem;
+    margin-bottom: 0;
+}
+
+.subtitle {
+    font-size: 0.9rem;
+    color: var(--header-date-color);
+    margin-top: 0;
+}
+
+.subtitle a {
+    color: var(--entry-link-color);
+    text-decoration: none;
+}
+
+.subtitle a:hover {
+    text-decoration: underline;
 }
 
 section.header .date {
diff --git a/scripts/preview/main.go b/scripts/preview/main.go
index fec007c..f7e5212 100644
--- a/scripts/preview/main.go
+++ b/scripts/preview/main.go
@@ -95,6 +95,8 @@ func generateMockDigest(cfg *config.Config) *models.OverviewTemplateData {
 		data.PrimaryGroups[2].Summary = "This is another mock summary for a different group, showing that not all groups have summaries."
 	}
 
+	data.OverviewSummary = "This is a mock overview summary to see how it looks on the page. It should provide a high-level overview of all the digests included below."
+
 	return data
 }
 
-- 
2.54.0


From af3ac03ca2f9777ee1d51a0ed687407e6db9a955 Mon Sep 17 00:00:00 2001
From: eleith <online-gitea@eleith.com>
Date: Wed, 27 Aug 2025 13:16:21 +0000
Subject: [PATCH 4/4] feat(overview): add interactive card functionality

- Adds a "Mark as read" link to each group card on the overview page.
- The read status can be toggled by clicking the link again.
- Makes the entire card a clickable link to the digest page, improving usability.
- Adds a new `overview.js` script to handle this interactivity.
---
 internal/templates/overview.gohtml    |  2 ++
 internal/templates/static/overview.js | 42 +++++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 internal/templates/static/overview.js

diff --git a/internal/templates/overview.gohtml b/internal/templates/overview.gohtml
index 20ec1b4..96554ec 100644
--- a/internal/templates/overview.gohtml
+++ b/internal/templates/overview.gohtml
@@ -36,10 +36,12 @@
                     {{end}}
                     <div class="entry-meta">
                         <div class="entry-meta-tab">{{.TotalEntries}} entries from {{.TotalFeeds}} feeds.</div>
+                        <div class="entry-meta-tab" style="margin-left: auto;"><a href="#" class="mark-as-read-link">Mark as read</a></div>
                     </div>
                 </section>
             {{end}}
         </section>
     </div>
+    <script>{{include "static/overview.js"}}</script>
 </body>
 </html>
diff --git a/internal/templates/static/overview.js b/internal/templates/static/overview.js
new file mode 100644
index 0000000..8539f56
--- /dev/null
+++ b/internal/templates/static/overview.js
@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const markAsReadLinks = document.querySelectorAll('.mark-as-read-link');
+
+    markAsReadLinks.forEach(link => {
+        link.addEventListener('click', (event) => {
+            event.preventDefault();
+            const entry = event.target.closest('section.entry');
+            if (entry) {
+                entry.classList.toggle('viewed');
+                if (entry.classList.contains('viewed')) {
+                    event.target.textContent = 'Mark as unread';
+                } else {
+                    event.target.textContent = 'Mark as read';
+                }
+            }
+        });
+    });
+
+    const entries = document.querySelectorAll('.grouped-digests .entry');
+    entries.forEach(entry => {
+        entry.addEventListener('click', (event) => {
+            // Don't do anything if a link in the meta section was clicked
+            if (event.target.closest('.entry-meta')) {
+                return;
+            }
+
+            // Find the main link and navigate to it
+            const mainLink = entry.querySelector('a.entry-link');
+            if (mainLink) {
+                mainLink.click();
+            }
+        });
+        // Add a cursor pointer to the whole card except the meta section
+        entry.style.cursor = 'pointer';
+    });
+
+    // Remove cursor pointer from the meta section
+    const metaSections = document.querySelectorAll('.entry-meta');
+    metaSections.forEach(meta => {
+        meta.style.cursor = 'auto';
+    });
+});
-- 
2.54.0