From 1ae098676706ed87fb33fff2e627744d385eac0d Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 24 May 2026 13:14:10 +0530
Subject: [PATCH] feat(activity): hover effect on log items to signal
 editability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add group + hover:bg-rose-50 + hover:shadow-sm to timeline log rows
- Add group + hover:bg-rose-50 to day-sheet log rows
- Chevron › turns rose-400 on hover (group-hover) in both places
- transition-all for smooth background + shadow animation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/activity/page.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/activity/page.tsx b/src/app/activity/page.tsx
index 8aeb685..5feb1a5 100644
--- a/src/app/activity/page.tsx
+++ b/src/app/activity/page.tsx
@@ -346,7 +346,7 @@ export default function ActivityPage() {
                         <button
                           key={log.id}
                           onClick={() => { setSelectedLog(log); setDeleteConfirm(false); }}
-                          className="w-full flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-xl text-left active:scale-[0.98] transition-transform"
+                          className="group w-full flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-xl text-left transition-all active:scale-[0.98] hover:bg-rose-50/70 dark:hover:bg-gray-700/80 hover:shadow-sm"
                         >
                           <span className="text-2xl">{getIcon(log.type)}</span>
                           <div className="flex-1 min-w-0">
@@ -359,8 +359,11 @@ export default function ActivityPage() {
                               ].filter(Boolean).join(" · ")}
                             </div>
                           </div>
-                          <div className="text-sm text-gray-400 flex-shrink-0">
-                            {new Date(log.loggedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                          <div className="flex items-center gap-1.5 flex-shrink-0">
+                            <span className="text-sm text-gray-400">
+                              {new Date(log.loggedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                            </span>
+                            <span className="text-gray-300 dark:text-gray-600 group-hover:text-rose-400 transition-colors text-base leading-none">›</span>
                           </div>
                         </button>
                       ))}
@@ -522,7 +525,7 @@ export default function ActivityPage() {
                     <button
                       key={log.id}
                       onClick={() => { setSelectedLog(log); setDeleteConfirm(false); setDaySheetDate(null); }}
-                      className="w-full flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-xl text-left active:scale-[0.98] transition-transform"
+                      className="group w-full flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-xl text-left transition-all active:scale-[0.98] hover:bg-rose-50 dark:hover:bg-gray-700 hover:shadow-sm"
                     >
                       <span className="text-2xl">{sheetTypeIcon}</span>
                       <div className="flex-1 min-w-0">
@@ -539,7 +542,7 @@ export default function ActivityPage() {
                         <span className="text-sm text-gray-400">
                           {new Date(log.loggedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                         </span>
-                        <span className="text-gray-300 text-lg">›</span>
+                        <span className="text-gray-300 dark:text-gray-600 group-hover:text-rose-400 transition-colors text-lg">›</span>
                       </div>
                     </button>
                   ))