refactor: interaction button and hover group components

src/components/AccountNotifications.tsx

@@ -8,8 +8,10 @@ import { AppContext } from '../context/App';
 import { type Account, Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openAccountProfile } from '../utils/links';
+import { HoverGroup } from './HoverGroup';
 import { NotificationRow } from './NotificationRow';
 import { RepositoryNotifications } from './RepositoryNotifications';
+import { InteractionButton } from './buttons/InteractionButton';
 import { PlatformIcon } from './icons/PlatformIcon';
 
 interface IAccountNotifications {
@@ -82,16 +84,14 @@ export const AccountNotifications: FC<IAccountNotifications> = (
               @{account.user.login}
             </button>
           </div>
-          <div className="opacity-0 transition-opacity group-hover:opacity-80">
-            <button
-              type="button"
-              className="h-full hover:text-green-500 focus:outline-none"
+          <HoverGroup>
+            <InteractionButton
               title={toggleAccountNotificationsLabel}
+              icon={ChevronIcon}
+              size={Size.SMALL}
               onClick={toggleAccountNotifications}
-            >
-              <ChevronIcon size={Size.SMALL} />
-            </button>
-          </div>
+            />
+          </HoverGroup>
         </div>
       )}
 

src/components/HoverGroup.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { HoverGroup } from './HoverGroup';
+
+describe('components/HoverGroup.tsx', () => {
+  it('should render', () => {
+    const tree = render(<HoverGroup>Hover Group</HoverGroup>);
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/HoverGroup.tsx

@@ -0,0 +1,13 @@
+import type { FC, ReactNode } from 'react';
+
+interface IHoverGroup {
+  children: ReactNode;
+}
+
+export const HoverGroup: FC<IHoverGroup> = ({ children }: IHoverGroup) => {
+  return (
+    <div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
+      {children}
+    </div>
+  );
+};

src/components/NotificationRow.tsx

@@ -35,6 +35,8 @@ import {
   openUserProfile,
 } from '../utils/links';
 import { formatReason } from '../utils/reason';
+import { HoverGroup } from './HoverGroup';
+import { InteractionButton } from './buttons/InteractionButton';
 import { PillButton } from './buttons/PillButton';
 import { AvatarIcon } from './icons/AvatarIcon';
 
@@ -255,45 +257,34 @@ export const NotificationRow: FC<INotificationRow> = ({
         </div>
       </div>
 
-      <div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
-        <button
-          type="button"
-          className="h-full hover:text-green-500 focus:outline-none"
+      <HoverGroup>
+        <InteractionButton
           title="Mark as Done"
+          icon={CheckIcon}
+          size={Size.MEDIUM}
           onClick={() => {
             setAnimateExit(!settings.delayNotificationState);
             setShowAsRead(settings.delayNotificationState);
             markNotificationDone(notification);
           }}
-        >
-          <CheckIcon size={Size.MEDIUM} aria-label="Mark as Done" />
-        </button>
-
-        <button
-          type="button"
-          className="h-full hover:text-green-500 focus:outline-none"
+        />
+        <InteractionButton
           title="Mark as Read"
+          icon={ReadIcon}
+          size={Size.SMALL}
           onClick={() => {
             setAnimateExit(!settings.delayNotificationState);
             setShowAsRead(settings.delayNotificationState);
             markNotificationRead(notification);
           }}
-        >
-          <ReadIcon size={Size.SMALL} aria-label="Mark as Read" />
-        </button>
-
-        <button
-          type="button"
-          className="h-full hover:text-red-500 focus:outline-none"
+        />
+        <InteractionButton
           title="Unsubscribe from Thread"
+          icon={BellSlashIcon}
+          size={Size.SMALL}
           onClick={unsubscribeFromThread}
-        >
-          <BellSlashIcon
-            size={Size.SMALL}
-            aria-label="Unsubscribe from Thread"
-          />
-        </button>
-      </div>
+        />
+      </HoverGroup>
     </div>
   );
 };

src/components/RepositoryNotifications.tsx

@@ -16,7 +16,9 @@ import { AppContext } from '../context/App';
 import { Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openRepository } from '../utils/links';
+import { HoverGroup } from './HoverGroup';
 import { NotificationRow } from './NotificationRow';
+import { InteractionButton } from './buttons/InteractionButton';
 import { AvatarIcon } from './icons/AvatarIcon';
 
 interface IRepositoryNotifications {
@@ -81,37 +83,26 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           </span>
         </div>
 
-        <div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
-          <button
-            type="button"
-            className="h-full hover:text-green-500 focus:outline-none"
+        <HoverGroup>
+          <InteractionButton
             title="Mark Repository as Done"
+            icon={CheckIcon}
+            size={Size.MEDIUM}
             onClick={markRepoAsDone}
-          >
-            <CheckIcon
-              size={Size.MEDIUM}
-              aria-label="Mark Repository as Done"
-            />
-          </button>
-
-          <button
-            type="button"
-            className="h-full hover:text-green-500 focus:outline-none"
+          />
+          <InteractionButton
             title="Mark Repository as Read"
+            icon={ReadIcon}
+            size={Size.SMALL}
             onClick={markRepoAsRead}
-          >
-            <ReadIcon size={Size.SMALL} aria-label="Mark Repository as Read" />
-          </button>
-
-          <button
-            type="button"
-            className="h-full hover:text-green-500 focus:outline-none"
+          />
+          <InteractionButton
             title={toggleRepositoryNotificationsLabel}
+            icon={ChevronIcon}
+            size={Size.SMALL}
             onClick={toggleRepositoryNotifications}
-          >
-            <ChevronIcon size={Size.SMALL} />
-          </button>
-        </div>
+          />
+        </HoverGroup>
       </div>
 
       {showRepositoryNotifications &&