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

src/app/components/update-notification/UpdateNotification.css.ts

@@ -1,6 +1,14 @@
 import { style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
 
+export const CheckButtonContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '32px',
+  width: '32px',
+});
+
 export const CheckButton = style({
   all: 'unset',
   display: 'flex',
@@ -11,13 +19,19 @@ export const CheckButton = style({
   cursor: 'pointer',
   color: color.Secondary.Main,
   backgroundColor: 'transparent',
-  transition: 'background-color 0.15s',
+  transition: 'opacity 0.2s, background-color 0.15s',
   height: '32px',
   width: '32px',
-  opacity: 0.7,
+  opacity: 0,
   WebkitAppRegion: 'no-drag',
   flexShrink: 0,
 
+  selectors: {
+    '&[data-visible="true"]': {
+      opacity: 0.7,
+    },
+  },
+
   ':hover': {
     backgroundColor: color.Surface.ContainerHover,
     opacity: 1,
@@ -30,6 +44,7 @@ export const CheckButton = style({
   ':focus-visible': {
     outline: `2px solid ${color.Secondary.Main}`,
     outlineOffset: '2px',
+    opacity: 1,
   },
 });