style: toggle on row click & action buttons order (#1248)

* feat: toggle repository notification

* feat: toggle repository notification

* style: toggle on row click & action buttons order

* chore: update snapshots

* fix: restore `gap` in account spacing

---------

Co-authored-by: Adam Setch <adam.setch@outlook.com>

biome.json

@@ -11,6 +11,9 @@
         "noUnusedFunctionParameters": "error",
         "useDefaultSwitchClause": "error"
       },
+      "a11y": {
+        "useKeyWithClickEvents": "off"
+      },
       "correctness": {
         "useExhaustiveDependencies": {
           "level": "warn",

src/components/AccountNotifications.tsx

@@ -55,8 +55,11 @@ export const AccountNotifications = (props: IProps) => {
   return (
     <>
       {showAccountHostname && (
-        <div className="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white">
-          <div>
+        <div
+          className="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
+          onClick={toggleAccountNotifications}
+        >
+          <div className="flex gap-3">
             <PlatformIcon type={account.platform} size={16} />
             <button
               type="button"
@@ -74,7 +77,7 @@ export const AccountNotifications = (props: IProps) => {
               title={toggleAccountNotificationsLabel}
               onClick={toggleAccountNotifications}
             >
-              <ChevronIcon size={20} />
+              <ChevronIcon size={14} />
             </button>
           </div>
         </div>

src/components/NotificationRow.test.tsx

@@ -399,7 +399,7 @@ describe('components/NotificationRow.tsx', () => {
         </AppContext.Provider>,
       );
 
-      fireEvent.keyDown(screen.getByRole('main'));
+      fireEvent.click(screen.getByRole('main'));
       expect(links.openNotification).toHaveBeenCalledTimes(1);
       expect(removeNotificationFromState).toHaveBeenCalledTimes(1);
     });

src/components/NotificationRow.tsx

@@ -118,7 +118,6 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
       <div
         className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         onClick={() => handleNotification()}
-        onKeyDown={() => handleNotification()}
       >
         <div
           className="mb-1 cursor-pointer truncate text-sm"
@@ -230,15 +229,6 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
           <CheckIcon size={16} aria-label="Mark as Done" />
         </button>
 
-        <button
-          type="button"
-          className="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
-          onClick={unsubscribeFromThread}
-        >
-          <BellSlashIcon size={14} aria-label="Unsubscribe from Thread" />
-        </button>
-
         <button
           type="button"
           className="h-full hover:text-green-500 focus:outline-none"
@@ -251,6 +241,15 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
         >
           <ReadIcon size={14} aria-label="Mark as Read" />
         </button>
+
+        <button
+          type="button"
+          className="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
+          onClick={unsubscribeFromThread}
+        >
+          <BellSlashIcon size={14} aria-label="Unsubscribe from Thread" />
+        </button>
       </div>
     </div>
   );

src/components/Repository.tsx

@@ -51,7 +51,10 @@ export const RepositoryNotifications: FC<IProps> = ({
 
   return (
     <>
-      <div className="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white">
+      <div
+        className="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
+        onClick={toggleRepositoryNotifications}
+      >
         <div className="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
           {avatarUrl ? (
             <img
@@ -65,21 +68,12 @@ export const RepositoryNotifications: FC<IProps> = ({
           <span
             className="cursor-pointer truncate opacity-90"
             onClick={() => openRepository(repoNotifications[0].repository)}
-            onKeyDown={() => openRepository(repoNotifications[0].repository)}
           >
             {repoName}
           </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"
-            title={toggleRepositoryNotificationsLabel}
-            onClick={toggleRepositoryNotifications}
-          >
-            <ChevronIcon size={16} />
-          </button>
           <button
             type="button"
             className="h-full hover:text-green-500 focus:outline-none"
@@ -89,8 +83,6 @@ export const RepositoryNotifications: FC<IProps> = ({
             <CheckIcon size={16} aria-label="Mark Repository as Done" />
           </button>
 
-          <div className="w-[14px]" />
-
           <button
             type="button"
             className="h-full hover:text-green-500 focus:outline-none"
@@ -99,6 +91,15 @@ export const RepositoryNotifications: FC<IProps> = ({
           >
             <ReadIcon size={14} aria-label="Mark Repository as Read" />
           </button>
+
+          <button
+            type="button"
+            className="h-full hover:text-green-500 focus:outline-none"
+            title={toggleRepositoryNotificationsLabel}
+            onClick={toggleRepositoryNotifications}
+          >
+            <ChevronIcon size={14} />
+          </button>
         </div>
       </div>