Super lazy way to implement "only mentions" in Notifications

#OnlyMentions

Could have make another tab that makes another request to /notifications but I feel lazy

src/index.css

@@ -218,6 +218,10 @@ code {
   flex-grow: 1;
 }
 
+.insignificant {
+  color: var(--text-insignificant-color);
+}
+
 /* KEYFRAMES */
 
 @keyframes fade-in {

src/pages/notifications.css

@@ -3,6 +3,10 @@
   padding: 16px !important;
   gap: 16px;
 }
+.only-mentions .notification:not(.mention),
+.only-mentions .timeline-empty {
+  display: none;
+}
 .notification.skeleton {
   color: var(--outline-color);
 }
@@ -30,7 +34,11 @@
   max-height: 160px;
   overflow: hidden;
   /* fade out mask gradient bottom */
-  mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 50%, transparent);
+  mask-image: linear-gradient(
+    rgba(0, 0, 0, 1),
+    rgba(0, 0, 0, 1) 50%,
+    transparent
+  );
   filter: saturate(0.25);
 }
 .notification .status-link:hover {
@@ -46,4 +54,24 @@
 }
 .notification-content p:first-child {
   margin-top: 0;
-}
+}
+
+#mentions-option {
+  float: right;
+  margin-top: 0.5em;
+}
+#mentions-option label {
+  color: var(--text-insignificant-color);
+  display: inline-block;
+  padding: 1em 16px;
+  position: relative;
+  cursor: pointer;
+  z-index: 1;
+  font-size: 90%;
+  background-color: var(--bg-blur-color);
+  border-radius: 2em;
+}
+#mentions-option label:has(:checked) {
+  color: var(--text-color);
+  background-color: var(--bg-color);
+}

src/pages/notifications.jsx

@@ -97,6 +97,18 @@ function Notification({ notification }) {
             </>
           )}
           {text}
+          {type === 'mention' && (
+            <span class="insignificant">
+              {' '}
+              •{' '}
+              <relative-time
+                datetime={notification.createdAt}
+                format="micro"
+                threshold="P1D"
+                prefix=""
+              />
+            </span>
+          )}
         </p>
         {_accounts?.length > 1 && (
           <p>
@@ -192,6 +204,7 @@ function Notifications() {
   const snapStates = useSnapshot(states);
   const [uiState, setUIState] = useState('default');
   const [showMore, setShowMore] = useState(false);
+  const [onlyMentions, setOnlyMentions] = useState(false);
 
   const notificationsIterator = useRef(
     masto.notifications.getIterator({
@@ -273,7 +286,7 @@ function Notifications() {
   // console.log(groupedNotifications);
   return (
     <div class="deck-container" ref={scrollableRef}>
-      <div class="timeline-deck deck">
+      <div class={`timeline-deck deck ${onlyMentions ? 'only-mentions' : ''}`}>
         <header>
           <div class="header-side">
             <a href="#" class="button plain">
@@ -310,6 +323,18 @@ function Notifications() {
             </button>
           )}
         </header>
+        <div id="mentions-option">
+          <label>
+            <input
+              type="checkbox"
+              checked={onlyMentions}
+              onChange={(e) => {
+                setOnlyMentions(e.target.checked);
+              }}
+            />{' '}
+            Only mentions
+          </label>
+        </div>
         {snapStates.notifications.length ? (
           <>
             <h2 class="timeline-header">Today</h2>