From e917e679303c8fa4e12127f59883c17ed603b7aa Mon Sep 17 00:00:00 2001
From: soup <code@soup.land>
Date: Sat, 17 Jan 2026 01:44:51 -0500
Subject: [PATCH] Show item tags and titles on hover

---
 internal/handlers/home.go   |  9 ++++++++-
 internal/static/css/app.css | 29 ++++++++++++++++++++++++++---
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/internal/handlers/home.go b/internal/handlers/home.go
index 23c3654..0612d3f 100644
--- a/internal/handlers/home.go
+++ b/internal/handlers/home.go
@@ -73,12 +73,19 @@ func (h homeContent) Render(sw *ssr.Writer) error {
 				{{if .LinkURL}}<div class="link-url">{{.LinkURL}}</div>{{end}}
 			</div>
 			{{end}}
+		{{if or .Title .Tags}}
+		<div class="item-overlay">
+			{{if and .Title (ne .ItemType "link") (ne .ItemType "quote")}}
+			<div class="item-title">{{.Title}}</div>
+			{{end}}
 			{{if .Tags}}
 			<div class="item-tags">
 				{{range .Tags}}<span class="item-tag">{{.}}</span>{{end}}
 			</div>
 			{{end}}
-		</a>
+		</div>
+		{{end}}
+	</a>
 		{{end}}
 	</div>
 </div>
diff --git a/internal/static/css/app.css b/internal/static/css/app.css
index a316fa5..2be45b6 100644
--- a/internal/static/css/app.css
+++ b/internal/static/css/app.css
@@ -254,14 +254,36 @@ button, input, textarea, select {
 	pointer-events: none;
 }
 
+/* Item Overlay */
+.item-overlay {
+	position: absolute;
+	inset: auto 0 0 0;
+	padding: 0.75rem;
+	background: rgba(255, 255, 255, 0.9);
+	border-top: 1px solid var(--gray-2);
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	opacity: 0;
+	transform: translateY(8px);
+	transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.grid-item:hover .item-overlay {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.item-title {
+	font-weight: 700;
+	font-size: 0.9rem;
+}
+
 /* Item Tags */
 .item-tags {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 0.25rem;
-	padding: 0.5rem;
-	background: var(--bg);
-	border-top: 1px solid var(--gray-2);
 }
 
 .item-tag {
@@ -398,6 +420,7 @@ button, input, textarea, select {
 	border: none;
 	padding: 0;
 	margin-bottom: 1rem;
+	gap: 0.5rem;
 }
 
 .item-meta .timestamp {