feat: implement useMarkAsRead hook for improved unread state management and update notification handling

src/app/components/update-notification/UpdateNotification.tsx

@@ -21,6 +21,7 @@ export function UpdateNotification() {
   const [downloadProgress, setDownloadProgress] = useState(0);
   const [updateReady, setUpdateReady] = useState(false);
   const [checking, setChecking] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
   const [menuAnchor, setMenuAnchor] = useState<{ x: number; y: number; width: number; height: number } | undefined>(undefined);
 
   useEffect(() => {
@@ -118,29 +119,36 @@ export function UpdateNotification() {
   // Show check button if no update status
   if (!updateAvailable && !updateReady && !checking) {
     return (
-      <button
-        className={css.CheckButton}
-        onClick={handleCheckForUpdates}
-        aria-label="Check for updates"
-        title="Check for updates"
-        type="button"
+      <div
+        className={css.CheckButtonContainer}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-          <path
-            d="M8 2V10M8 10L5 7M8 10L11 7"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M3 14H13"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-          />
-        </svg>
-      </button>
+        <button
+          className={css.CheckButton}
+          data-visible={isHovered}
+          onClick={handleCheckForUpdates}
+          aria-label="Check for updates"
+          title="Check for updates"
+          type="button"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M8 2V10M8 10L5 7M8 10L11 7"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M3 14H13"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      </div>
     );
   }