Repository: gitify-app/gitify
Pull request #1248 (2024-06-16 16:56:46)

style: toggle on row click & action buttons order
Adds the functionality that was referred to in https://github.com/gitify-app/gitify/pull/1245#issuecomment-2171428582

Also sorted the order of the buttons to try to attain some added consistency.

<img width="448" alt="image" src="https://github.com/gitify-app/gitify/assets/19473034/c472bc66-afa3-4ef0-b85b-8fecad966c92">


afonsojramos: @setchy what do you think of this one?
setchy: > @setchy what do you think of this one?

clever ordering hack.  does mean we diverge a bit from GitHub UI, but worth it imo

Patch:
diff --git a/biome.json b/biome.json
index 8b73637e..bac4f37f 100644
--- a/biome.json
+++ b/biome.json
@@ -11,6 +11,9 @@
         "noUnusedFunctionParameters": "error",
         "useDefaultSwitchClause": "error"
       },
+      "a11y": {
+        "useKeyWithClickEvents": "off"
+      },
       "correctness": {
         "useExhaustiveDependencies": {
           "level": "warn",
diff --git a/package.json b/package.json
index 240e2139..f3e05d63 100644
--- a/package.json
+++ b/package.json
@@ -146,7 +146,7 @@
     "rimraf": "5.0.7",
     "style-loader": "4.0.0",
     "tailwindcss": "3.4.4",
-    "ts-jest": "29.1.4",
+    "ts-jest": "29.1.5",
     "ts-node": "10.9.2",
     "webpack": "5.92.0",
     "webpack-cli": "5.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4a84b637..c7295559 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -121,8 +121,8 @@ importers:
         specifier: 3.4.4
         version: 3.4.4(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5))
       ts-jest:
-        specifier: 29.1.4
-        version: 29.1.4(@babel/core@7.24.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.3))(jest@29.7.0(@types/node@20.14.2)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))(typescript@5.4.5)
+        specifier: 29.1.5
+        version: 29.1.5(@babel/core@7.24.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.3))(jest@29.7.0(@types/node@20.14.2)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))(typescript@5.4.5)
       ts-node:
         specifier: 10.9.2
         version: 10.9.2(@types/node@20.14.2)(typescript@5.4.5)
@@ -2899,8 +2899,8 @@ packages:
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
-  ts-jest@29.1.4:
-    resolution: {integrity: sha512-YiHwDhSvCiItoAgsKtoLFCuakDzDsJ1DLDnSouTaTmdOcOwIkSzbLXduaQ6M5DRVhuZC/NYaaZ/mtHbWMv/S6Q==}
+  ts-jest@29.1.5:
+    resolution: {integrity: sha512-UuClSYxM7byvvYfyWdFI+/2UxMmwNyJb0NPkZPQE2hew3RurV7l7zURgOHAd/1I1ZdPpe3GUsXNXAcN8TFKSIg==}
     engines: {node: ^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -6377,7 +6377,7 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-jest@29.1.4(@babel/core@7.24.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.3))(jest@29.7.0(@types/node@20.14.2)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))(typescript@5.4.5):
+  ts-jest@29.1.5(@babel/core@7.24.3)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.3))(jest@29.7.0(@types/node@20.14.2)(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5)))(typescript@5.4.5):
     dependencies:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index d97b9855..15dbe223 100644
--- a/src/components/AccountNotifications.tsx
+++ b/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>
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 6a6bb4d4..bcd9ff4e 100644
--- a/src/components/NotificationRow.tsx
+++ b/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>
   );
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index 26da6b26..a0cc564f 100644
--- a/src/components/Repository.tsx
+++ b/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>
 


Test patch:
diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
index 567b7080..29f28aeb 100644
--- a/src/components/NotificationRow.test.tsx
+++ b/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);
     });
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 4c8abbbf..4ddee861 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -8,7 +8,9 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
       <div
         class="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
+          class="flex gap-3"
+        >
           <span
             class="mr-1"
             title="GitHub Cloud"
@@ -50,13 +52,13 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
               class="octicon octicon-chevron-down"
               fill="currentColor"
               focusable="false"
-              height="20"
+              height="14"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="20"
+              viewBox="0 0 12 12"
+              width="14"
             >
               <path
-                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+                d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
               />
             </svg>
           </button>
@@ -71,7 +73,9 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
     <div
       class="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
+        class="flex gap-3"
+      >
         <span
           class="mr-1"
           title="GitHub Cloud"
@@ -113,13 +117,13 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             class="octicon octicon-chevron-down"
             fill="currentColor"
             focusable="false"
-            height="20"
+            height="14"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="20"
+            viewBox="0 0 12 12"
+            width="14"
           >
             <path
-              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+              d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
             />
           </svg>
         </button>
@@ -191,7 +195,9 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
       <div
         class="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
+          class="flex gap-3"
+        >
           <span
             class="mr-1"
             title="GitHub Cloud"
@@ -233,10 +239,10 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
               class="octicon octicon-chevron-left"
               fill="currentColor"
               focusable="false"
-              height="20"
+              height="14"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
-              width="20"
+              width="14"
             >
               <path
                 d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
@@ -251,7 +257,9 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
     <div
       class="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
+        class="flex gap-3"
+      >
         <span
           class="mr-1"
           title="GitHub Cloud"
@@ -293,10 +301,10 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             class="octicon octicon-chevron-left"
             fill="currentColor"
             focusable="false"
-            height="20"
+            height="14"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="20"
+            width="14"
           >
             <path
               d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
@@ -368,7 +376,9 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
       <div
         class="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
+          class="flex gap-3"
+        >
           <span
             class="mr-1"
             title="GitHub Cloud"
@@ -410,13 +420,13 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
               class="octicon octicon-chevron-up"
               fill="currentColor"
               focusable="false"
-              height="20"
+              height="14"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="20"
+              viewBox="0 0 12 12"
+              width="14"
             >
               <path
-                d="M3.22 10.53a.749.749 0 0 1 0-1.06l4.25-4.25a.749.749 0 0 1 1.06 0l4.25 4.25a.749.749 0 1 1-1.06 1.06L8 6.811 4.28 10.53a.749.749 0 0 1-1.06 0Z"
+                d="M6 4c-.2 0-.4.1-.5.2L2.2 7.5c-.3.3-.3.8 0 1.1.3.3.8.3 1.1 0L6 5.9l2.7 2.7c.3.3.8.3 1.1 0 .3-.3.3-.8 0-1.1L6.6 4.3C6.4 4.1 6.2 4 6 4Z"
               />
             </svg>
           </button>
@@ -427,7 +437,9 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
       <div
         class="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
+          class="flex gap-3"
+        >
           <span
             class="mr-1"
             title="GitHub Cloud"
@@ -469,13 +481,13 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
               class="octicon octicon-chevron-down"
               fill="currentColor"
               focusable="false"
-              height="20"
+              height="14"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="20"
+              viewBox="0 0 12 12"
+              width="14"
             >
               <path
-                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+                d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
               />
             </svg>
           </button>
@@ -490,7 +502,9 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
     <div
       class="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
+        class="flex gap-3"
+      >
         <span
           class="mr-1"
           title="GitHub Cloud"
@@ -532,13 +546,13 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
             class="octicon octicon-chevron-down"
             fill="currentColor"
             focusable="false"
-            height="20"
+            height="14"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="20"
+            viewBox="0 0 12 12"
+            width="14"
           >
             <path
-              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+              d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
             />
           </svg>
         </button>
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 962b45f3..1ade8bac 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -193,13 +193,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -209,18 +209,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -230,7 +230,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -427,13 +427,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -443,18 +443,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -464,7 +464,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -718,13 +718,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -734,18 +734,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -755,7 +755,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -952,13 +952,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -968,18 +968,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -989,7 +989,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -1221,13 +1221,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -1237,18 +1237,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -1258,7 +1258,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -1433,13 +1433,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -1449,18 +1449,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -1470,7 +1470,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -1748,13 +1748,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -1764,18 +1764,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -1785,7 +1785,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -2006,13 +2006,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -2022,18 +2022,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -2043,7 +2043,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -2275,13 +2275,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -2291,18 +2291,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -2312,7 +2312,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -2487,13 +2487,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -2503,18 +2503,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -2524,7 +2524,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -2756,13 +2756,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -2772,18 +2772,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -2793,7 +2793,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -2968,13 +2968,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -2984,18 +2984,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -3005,7 +3005,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -3304,13 +3304,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -3320,18 +3320,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -3341,7 +3341,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -3583,13 +3583,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -3599,18 +3599,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -3620,7 +3620,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -3919,13 +3919,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -3935,18 +3935,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -3956,7 +3956,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -4198,13 +4198,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -4214,18 +4214,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -4235,7 +4235,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -4394,13 +4394,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -4410,18 +4410,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -4431,7 +4431,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -4533,13 +4533,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -4549,18 +4549,18 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -4570,7 +4570,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -4773,13 +4773,13 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -4789,18 +4789,18 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -4810,7 +4810,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -4956,13 +4956,13 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -4972,18 +4972,18 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -4993,7 +4993,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -5196,13 +5196,13 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -5212,18 +5212,18 @@ exports[`components/NotificationRow.tsx should render itself & its children when
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -5233,7 +5233,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -5379,13 +5379,13 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -5395,18 +5395,18 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -5416,7 +5416,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
@@ -5623,13 +5623,13 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             </svg>
           </button>
           <button
-            class="h-full hover:text-red-500 focus:outline-none"
-            title="Unsubscribe from Thread"
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
             type="button"
           >
             <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -5639,18 +5639,18 @@ exports[`components/NotificationRow.tsx should render itself & its children with
               width="14"
             >
               <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
           <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark as Read"
+            class="h-full hover:text-red-500 focus:outline-none"
+            title="Unsubscribe from Thread"
             type="button"
           >
             <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
               fill="currentColor"
               focusable="false"
               height="14"
@@ -5660,7 +5660,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
               />
             </svg>
           </button>
@@ -5810,13 +5810,13 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           </svg>
         </button>
         <button
-          class="h-full hover:text-red-500 focus:outline-none"
-          title="Unsubscribe from Thread"
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
           type="button"
         >
           <svg
-            aria-label="Unsubscribe from Thread"
-            class="octicon octicon-bell-slash"
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -5826,18 +5826,18 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             width="14"
           >
             <path
-              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
         <button
-          class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark as Read"
+          class="h-full hover:text-red-500 focus:outline-none"
+          title="Unsubscribe from Thread"
           type="button"
         >
           <svg
-            aria-label="Mark as Read"
-            class="octicon octicon-read"
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
             fill="currentColor"
             focusable="false"
             height="14"
@@ -5847,7 +5847,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
             />
           </svg>
         </button>
diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index 47ecbbd7..729d3066 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/src/components/__snapshots__/Repository.test.tsx.snap
@@ -27,66 +27,63 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
         >
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Hide repository notifications"
+            title="Mark Repository as Done"
             type="button"
           >
             <svg
-              aria-hidden="true"
-              class="octicon octicon-chevron-down"
+              aria-label="Mark Repository as Done"
+              class="octicon octicon-check"
               fill="currentColor"
               focusable="false"
               height="16"
+              role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
               />
             </svg>
           </button>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark Repository as Done"
+            title="Mark Repository as Read"
             type="button"
           >
             <svg
-              aria-label="Mark Repository as Done"
-              class="octicon octicon-check"
+              aria-label="Mark Repository as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
-              height="16"
+              height="14"
               role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
-              width="16"
+              width="14"
             >
               <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
-          <div
-            class="w-[14px]"
-          />
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark Repository as Read"
+            title="Hide repository notifications"
             type="button"
           >
             <svg
-              aria-label="Mark Repository as Read"
-              class="octicon octicon-read"
+              aria-hidden="true"
+              class="octicon octicon-chevron-down"
               fill="currentColor"
               focusable="false"
               height="14"
-              role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
+              viewBox="0 0 12 12"
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
               />
             </svg>
           </button>
@@ -123,66 +120,63 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       >
         <button
           class="h-full hover:text-green-500 focus:outline-none"
-          title="Hide repository notifications"
+          title="Mark Repository as Done"
           type="button"
         >
           <svg
-            aria-hidden="true"
-            class="octicon octicon-chevron-down"
+            aria-label="Mark Repository as Done"
+            class="octicon octicon-check"
             fill="currentColor"
             focusable="false"
             height="16"
+            role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
             width="16"
           >
             <path
-              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
             />
           </svg>
         </button>
         <button
           class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark Repository as Done"
+          title="Mark Repository as Read"
           type="button"
         >
           <svg
-            aria-label="Mark Repository as Done"
-            class="octicon octicon-check"
+            aria-label="Mark Repository as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
-            height="16"
+            height="14"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="16"
+            width="14"
           >
             <path
-              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
-        <div
-          class="w-[14px]"
-        />
         <button
           class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark Repository as Read"
+          title="Hide repository notifications"
           type="button"
         >
           <svg
-            aria-label="Mark Repository as Read"
-            class="octicon octicon-read"
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
             fill="currentColor"
             focusable="false"
             height="14"
-            role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
             />
           </svg>
         </button>
@@ -285,66 +279,63 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         >
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Show repository notifications"
+            title="Mark Repository as Done"
             type="button"
           >
             <svg
-              aria-hidden="true"
-              class="octicon octicon-chevron-up"
+              aria-label="Mark Repository as Done"
+              class="octicon octicon-check"
               fill="currentColor"
               focusable="false"
               height="16"
+              role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M3.22 10.53a.749.749 0 0 1 0-1.06l4.25-4.25a.749.749 0 0 1 1.06 0l4.25 4.25a.749.749 0 1 1-1.06 1.06L8 6.811 4.28 10.53a.749.749 0 0 1-1.06 0Z"
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
               />
             </svg>
           </button>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark Repository as Done"
+            title="Mark Repository as Read"
             type="button"
           >
             <svg
-              aria-label="Mark Repository as Done"
-              class="octicon octicon-check"
+              aria-label="Mark Repository as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
-              height="16"
+              height="14"
               role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
-              width="16"
+              width="14"
             >
               <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
-          <div
-            class="w-[14px]"
-          />
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark Repository as Read"
+            title="Show repository notifications"
             type="button"
           >
             <svg
-              aria-label="Mark Repository as Read"
-              class="octicon octicon-read"
+              aria-hidden="true"
+              class="octicon octicon-chevron-up"
               fill="currentColor"
               focusable="false"
               height="14"
-              role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
+              viewBox="0 0 12 12"
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="M6 4c-.2 0-.4.1-.5.2L2.2 7.5c-.3.3-.3.8 0 1.1.3.3.8.3 1.1 0L6 5.9l2.7 2.7c.3.3.8.3 1.1 0 .3-.3.3-.8 0-1.1L6.6 4.3C6.4 4.1 6.2 4 6 4Z"
               />
             </svg>
           </button>
@@ -383,66 +374,63 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         >
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Hide repository notifications"
+            title="Mark Repository as Done"
             type="button"
           >
             <svg
-              aria-hidden="true"
-              class="octicon octicon-chevron-down"
+              aria-label="Mark Repository as Done"
+              class="octicon octicon-check"
               fill="currentColor"
               focusable="false"
               height="16"
+              role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
               />
             </svg>
           </button>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark Repository as Done"
+            title="Mark Repository as Read"
             type="button"
           >
             <svg
-              aria-label="Mark Repository as Done"
-              class="octicon octicon-check"
+              aria-label="Mark Repository as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
-              height="16"
+              height="14"
               role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
-              width="16"
+              width="14"
             >
               <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
-          <div
-            class="w-[14px]"
-          />
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark Repository as Read"
+            title="Hide repository notifications"
             type="button"
           >
             <svg
-              aria-label="Mark Repository as Read"
-              class="octicon octicon-read"
+              aria-hidden="true"
+              class="octicon octicon-chevron-down"
               fill="currentColor"
               focusable="false"
               height="14"
-              role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
+              viewBox="0 0 12 12"
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
               />
             </svg>
           </button>
@@ -488,66 +476,63 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
       >
         <button
           class="h-full hover:text-green-500 focus:outline-none"
-          title="Hide repository notifications"
+          title="Mark Repository as Done"
           type="button"
         >
           <svg
-            aria-hidden="true"
-            class="octicon octicon-chevron-down"
+            aria-label="Mark Repository as Done"
+            class="octicon octicon-check"
             fill="currentColor"
             focusable="false"
             height="16"
+            role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
             width="16"
           >
             <path
-              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
             />
           </svg>
         </button>
         <button
           class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark Repository as Done"
+          title="Mark Repository as Read"
           type="button"
         >
           <svg
-            aria-label="Mark Repository as Done"
-            class="octicon octicon-check"
+            aria-label="Mark Repository as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
-            height="16"
+            height="14"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="16"
+            width="14"
           >
             <path
-              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
-        <div
-          class="w-[14px]"
-        />
         <button
           class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark Repository as Read"
+          title="Hide repository notifications"
           type="button"
         >
           <svg
-            aria-label="Mark Repository as Read"
-            class="octicon octicon-read"
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
             fill="currentColor"
             focusable="false"
             height="14"
-            role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
             />
           </svg>
         </button>
@@ -650,66 +635,63 @@ exports[`components/Repository.tsx should use default repository icon when avata
         >
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Hide repository notifications"
+            title="Mark Repository as Done"
             type="button"
           >
             <svg
-              aria-hidden="true"
-              class="octicon octicon-chevron-down"
+              aria-label="Mark Repository as Done"
+              class="octicon octicon-check"
               fill="currentColor"
               focusable="false"
               height="16"
+              role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
               width="16"
             >
               <path
-                d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
               />
             </svg>
           </button>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark Repository as Done"
+            title="Mark Repository as Read"
             type="button"
           >
             <svg
-              aria-label="Mark Repository as Done"
-              class="octicon octicon-check"
+              aria-label="Mark Repository as Read"
+              class="octicon octicon-read"
               fill="currentColor"
               focusable="false"
-              height="16"
+              height="14"
               role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
-              width="16"
+              width="14"
             >
               <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
               />
             </svg>
           </button>
-          <div
-            class="w-[14px]"
-          />
           <button
             class="h-full hover:text-green-500 focus:outline-none"
-            title="Mark Repository as Read"
+            title="Hide repository notifications"
             type="button"
           >
             <svg
-              aria-label="Mark Repository as Read"
-              class="octicon octicon-read"
+              aria-hidden="true"
+              class="octicon octicon-chevron-down"
               fill="currentColor"
               focusable="false"
               height="14"
-              role="img"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
+              viewBox="0 0 12 12"
               width="14"
             >
               <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+                d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
               />
             </svg>
           </button>
@@ -755,66 +737,63 @@ exports[`components/Repository.tsx should use default repository icon when avata
       >
         <button
           class="h-full hover:text-green-500 focus:outline-none"
-          title="Hide repository notifications"
+          title="Mark Repository as Done"
           type="button"
         >
           <svg
-            aria-hidden="true"
-            class="octicon octicon-chevron-down"
+            aria-label="Mark Repository as Done"
+            class="octicon octicon-check"
             fill="currentColor"
             focusable="false"
             height="16"
+            role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
             width="16"
           >
             <path
-              d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
             />
           </svg>
         </button>
         <button
           class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark Repository as Done"
+          title="Mark Repository as Read"
           type="button"
         >
           <svg
-            aria-label="Mark Repository as Done"
-            class="octicon octicon-check"
+            aria-label="Mark Repository as Read"
+            class="octicon octicon-read"
             fill="currentColor"
             focusable="false"
-            height="16"
+            height="14"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="16"
+            width="14"
           >
             <path
-              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
             />
           </svg>
         </button>
-        <div
-          class="w-[14px]"
-        />
         <button
           class="h-full hover:text-green-500 focus:outline-none"
-          title="Mark Repository as Read"
+          title="Hide repository notifications"
           type="button"
         >
           <svg
-            aria-label="Mark Repository as Read"
-            class="octicon octicon-read"
+            aria-hidden="true"
+            class="octicon octicon-chevron-down"
             fill="currentColor"
             focusable="false"
             height="14"
-            role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
+            viewBox="0 0 12 12"
             width="14"
           >
             <path
-              d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
             />
           </svg>
         </button>