Emphasize mentions on notifications

src/pages/notifications.css

@@ -30,7 +30,7 @@
 
 .notification .status-link {
   border-radius: 8px 8px 0 0;
-  border: 1px solid var(--divider-color);
+  border: 1px solid var(--outline-color);
   max-height: 160px;
   overflow: hidden;
   /* fade out mask gradient bottom */
@@ -41,9 +41,16 @@
   );
   filter: saturate(0.25);
 }
+.notification .status-link.status-type-mention {
+  max-height: 320px;
+  filter: none;
+  background-color: var(--bg-color);
+  margin-top: calc(-16px - 1px);
+}
 .notification .status-link:hover {
   background-color: var(--bg-blur-color);
   filter: saturate(1);
+  border-color: var(--outline-hover-color);
 }
 .notification .status-link > * {
   pointer-events: none;

src/pages/notifications.jsx

@@ -82,6 +82,7 @@ function Notification({ notification }) {
         />
       </div>
       <div class="notification-content">
+        {type !== 'mention' && (
           <p>
             {!/poll|update/i.test(type) && (
               <>
@@ -110,6 +111,7 @@ function Notification({ notification }) {
               </span>
             )}
           </p>
+        )}
         {_accounts?.length > 1 && (
           <p>
             {_accounts.map((account, i) => (
@@ -142,7 +144,10 @@ function Notification({ notification }) {
           </p>
         )}
         {status && (
-          <Link class="status-link" href={`#/s/${actualStatusID}`}>
+          <Link
+            class={`status-link status-type-${type}`}
+            href={`#/s/${actualStatusID}`}
+          >
             <Status status={status} size="s" />
           </Link>
         )}